.ds-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-050);
  border: var(--border-0);

  .ds-button-icon-image {
    display: block;
    flex-shrink: 0;
    object-fit: contain;
  }

  &:disabled {
    background: var(--layer-disabled) !important;
    border: var(--border-0) !important;
  }

  &:disabled.outlined,
  &:disabled.ghost {
    background: var(--button-contrast) !important;
  }

  &:disabled.white {
    background: transparent !important;
    border: var(--border-0) !important;
  }

  &.accent {
    &.filled {
      background: var(--button-primary-default);

      &.active {
        background: var(--button-primary-active);
      }

      &:hover {
        background: var(--button-primary-hover);
      }
    }

    &.tonal {
      background: var(--button-secondary-default);

      &.active {
        background: var(--button-secondary-active);
      }

      &:hover {
        background: var(--button-secondary-hover);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-accent-2);

      &.active {
        border: var(--border-0);
      }

      &:hover {
        border: 1px solid var(--border-hover);
      }
    }

    &.ghost {
      background: var(--button-contrast);

      &.active {
        border: 1px solid var(--border-only-high-contrast);
        background: var(--button-secondary-hover);
      }

      &:hover {
        background: var(--button-secondary-hover);
      }
    }
  }

  &.danger {
    &.filled {
      background: var(--button-danger-default);

      &:hover {
        background: var(--button-danger-hover);
      }

      &.active {
        background: var(--button-danger-active);
      }
    }

    &.tonal {
      background: var(--button-secondary-default);

      &.active {
        background: var(--button-secondary-active);
      }

      &:hover {
        background: var(--button-secondary-hover);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-error);

      &.active {
        border: var(--border-0);
      }

      &:hover {
        border: 1px solid var(--border-error-hover);
      }
    }

    &.ghost {
      background: var(--button-contrast);

      &.active {
        border: 1px solid var(--border-only-high-contrast);
        background: var(--layer-layer-3);
      }

      &:hover {
        background: var(--button-secondary-default);
      }
    }
  }

  &.white {
    &.filled {
      background: var(--button-tertiary-default);

      &:hover {
        background: var(--button-tertiary-hover);
      }

      &.active {
        background: var(--button-tertiary-active);
      }
    }

    &.outlined {
      background: var(--button-contrast);
      border: 1px solid var(--border-button-white);

      &.active {
        border: var(--border-0);
      }
    }

    &.ghost {
      background: var(--button-contrast);

      &.active {
        background: var(--button-tertiary-active);
      }

      &:hover {
        background: var(--button-tertiary-hover);
      }
    }
  }

  &.large {
    width: 48px;
    height: 48px;
  }

  &.medium {
    width: 40px;
    height: 40px;
  }

  &.small {
    width: 32px;
    height: 32px;
  }

  &.x-small {
    width: 24px;
    height: 24px;
  }
}

.ds-icon-button-tooltip {
  font-size: 16px !important;
}
