web/packages/design-system/lib/components/IconButton/iconButton.module.css

.iconButton {
  position: relative;
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-width: 0;
  background-color: transparent;
  cursor: pointer;
  border-radius: var(--Corner-radius-rounded);

  &[data-disabled] {
    cursor: unset;
  }

  &:focus-visible {
    outline: 2px solid var(--Border-Interactive-Focus);
    outline-offset: 2px;

    &::before {
      content: "";
      position: absolute;
      inset: -2px;
      border: 2px solid var(--Border-Inverted);
      border-radius: inherit;
      pointer-events: none;
    }
  }
}

.size-sm {
  width: 24px;
  height: 24px;
}

.size-md {
  width: 32px;
  height: 32px;
}

.size-lg {
  width: 40px;
  height: 40px;
}

.size-xl {
  width: 48px;
  height: 48px;
}

.variant-filled {
  background-color: var(--Component-Button-Brand-Primary-Fill-Default);
  color: var(--Component-Button-Brand-Primary-On-fill-Default);

  &[data-disabled] {
    background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
  }

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background:
        linear-gradient(
          0deg,
          var(--Component-Button-Brand-Primary-Fill-Hover) 0%,
          var(--Component-Button-Brand-Primary-Fill-Hover) 100%
        ),
        var(--Component-Button-Brand-Primary-Fill-Default);
      color: var(--Component-Button-Brand-Primary-On-fill-Hover);
    }
  }

  &.emphasis {
    background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
    color: var(--Component-Button-Brand-Tertiary-On-fill-Default);

    &[data-disabled] {
      background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
      color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
    }

    @media (hover: hover) {
      &:hover:not([data-disabled]) {
        background:
          linear-gradient(
            0deg,
            var(--Component-Button-Brand-Tertiary-Fill-Hover) 0%,
            var(--Component-Button-Brand-Tertiary-Fill-Hover) 100%
          ),
          var(--Component-Button-Brand-Tertiary-Fill-Default);
        color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
      }
    }
  }
}

.variant-outlined {
  border: 1px solid var(--Border-Default);
  background-color: var(--Component-Button-Inverted-Fill-Default);
  color: var(--Icon-Interactive-Default);

  &[data-disabled] {
    border-color: var(--Border-Interactive-Disabled);
    background:
      linear-gradient(
        0deg,
        var(--Component-Button-Inverted-Fill-Disabled) 0%,
        var(--Component-Button-Inverted-Fill-Disabled) 100%
      ),
      var(--Component-Button-Inverted-Fill-Faded);
    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
  }

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background:
        linear-gradient(
          0deg,
          var(--Component-Button-Inverted-Fill-Hover) 0%,
          var(--Component-Button-Inverted-Fill-Hover) 100%
        ),
        var(--Component-Button-Inverted-Fill-Default);
    }
  }

  &:focus-visible {
    outline-offset: 0;

    &::before {
      inset: -5px;
    }
  }
}

.variant-elevated {
  background-color: var(--Component-Button-Inverted-Fill-Default);
  color: var(--Icon-Interactive-Default);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);

  &[data-disabled] {
    background:
      linear-gradient(
        0deg,
        var(--Component-Button-Inverted-Fill-Disabled) 0%,
        var(--Component-Button-Inverted-Fill-Disabled) 100%
      ),
      var(--Component-Button-Inverted-Fill-Faded);
    box-shadow: none;
    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
  }

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background:
        linear-gradient(
          0deg,
          var(--Component-Button-Inverted-Fill-Hover) 0%,
          var(--Component-Button-Inverted-Fill-Hover) 100%
        ),
        var(--Component-Button-Inverted-Fill-Default);
    }
  }

  &:focus-visible {
    outline-offset: 0;

    &::before {
      inset: -4px;
    }
  }
}

.variant-faded {
  background-color: var(--Component-Button-Inverted-Fill-Faded);
  color: var(--Icon-Interactive-Default);

  &[data-disabled] {
    background:
      linear-gradient(
        0deg,
        var(--Component-Button-Inverted-Fill-Disabled) 0%,
        var(--Component-Button-Inverted-Fill-Disabled) 100%
      ),
      var(--Component-Button-Inverted-Fill-Default);
    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
  }

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background:
        linear-gradient(
          0deg,
          var(--Component-Button-Inverted-Fill-Hover) 0%,
          var(--Component-Button-Inverted-Fill-Hover) 100%
        ),
        var(--Component-Button-Inverted-Fill-Default);
    }
  }

  &:focus-visible {
    outline-offset: 0;

    &::before {
      inset: -4px;
    }
  }
}

.variant-muted {
  background-color: var(--Component-Button-Muted-Fill-Default);
  color: var(--Icon-Inverted);

  &[data-disabled] {
    background-color: var(--Component-Button-Muted-Fill-Disabled);
    color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
  }

  @media (hover: hover) {
    &:hover:not([data-disabled]) {
      background-color: var(--Component-Button-Muted-Fill-Hover);
    }
  }

  &:focus-visible {
    outline-offset: 0;

    &::before {
      inset: -4px;
    }
  }

  &.emphasis {
    color: var(--Component-Button-Muted-On-fill-Default);

    &[data-disabled] {
      background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
      color: var(--Component-Button-Muted-On-fill-Disabled);
    }

    @media (hover: hover) {
      &:hover:not([data-disabled]) {
        background-color: var(--Component-Button-Muted-Fill-Hover-inverted);
        color: var(--Component-Button-Muted-On-fill-Hover-Inverted);
      }
    }
  }
}