@use "sass:math";

.cobalt- {
  &Icon {
    @apply c-fill-onSurface;
    display: inline-block;
    height: 24px;
    width: 24px;
    max-height: 100%;
    max-width: 100%;
    // TO REMOVE IN ORDER TO USE UTILITIES FOR MARGINS
    margin: auto;

    vertical-align: middle;
    line-height: 0;

    fill: currentColor;

    > svg {
      display: inline-block;
      width: 100%;
      max-width: 100%;
      max-height: 100%;
    }
  }

  &Icon--contained {
    @apply c-bg-surfaceContainerVariant c-rounded-lg;
    height: 40px;
    width: 40px;
    padding: math.div(40px - 24px, 2);
  }

  &Icon--size16 {
    height: 16px;
    width: 16px;

    &.cobalt-Icon--contained {
      height: 28px;
      width: 28px;

      padding: math.div(28px - 16px, 2);

      @apply c-rounded-md;
    }
  }

  &Icon--size20 {
    height: 20px;
    width: 20px;

    &.cobalt-Icon--contained {
      height: 32px;
      width: 32px;

      padding: math.div(32px - 20px, 2);

      @apply c-rounded-md;
    }
  }

  &Icon--size32 {
    height: 32px;
    width: 32px;

    &.cobalt-Icon--contained {
      height: 52px;
      width: 52px;

      padding: math.div(52px - 32px, 2);

      @apply c-rounded-lg;
    }
  }

  &Icon--loading {
    animation: cobalt-animation__full-rotation 0.75s linear infinite;
  }
}