@use "../../../1-settings/color-swatches";
@use "../../../1-settings/class-vars";
/*
############     _icon-button.scss      ############
*/
#{class-vars.$base-class} {

  .icon-button {
    border-radius: 999px;
    font-size: 1rem;
    min-height: var(--form-ele-medium);
    min-width: var(--form-ele-medium);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &--borderless {
      border-color: transparent;
      background: transparent;
      &:hover {
        color: var(--gray-dark-color);
        background: var(--hover-gray-color);
        border-color: transparent;
      }
      &.button--primary-color {
        &:hover {
          color: var(--primary-color-dark);
        }
      }
      &.button--secondary-color {
        &:hover {
          color: var(--secondary-color-dark);
        }
      }
      &.button--accent-color {
        &:hover {
          color: var(--accent-color-dark);
        }
      }
      @at-root #{class-vars.$primary-color-is-light}#{&} {
        &.button--primary-color {
          border-color: transparent;
          &:hover {
            color: var(--primary-color-dark);
            background: var(--hover-gray-color);
          }
        }
      }
      @at-root #{class-vars.$secondary-color-is-light}#{&} {
        &.button--secondary-color {
          border-color: transparent;
          &:hover {
            color: var(--secondary-color-dark);
            background: var(--hover-gray-color);
          }
        }
      }
      @at-root #{class-vars.$accent-color-is-light}#{&} {
        &.button--accent-color {
          border-color: transparent;
          &:hover {
            color: var(--accent-color-dark);
            background: var(--hover-gray-color);
          }
        }
      }
      &[disabled], &[disable]:hover {
        background: transparent !important;
        border-color: transparent !important;
      }
    }

    &__icon {
      transition: all var(--timing-quick) ease-in-out;
      &--rotate180 {
        transform: rotate(180deg);
      }
    }

    [class*='utds-icon-before-'] {
      line-height: .5;
      display: block;
      &::before {
        margin: 0;
        font-size: 1.25rem;
      }
    }

    /* ------------ SIZES ------------ */
    &--small1x {
      font-size: .85rem;
      min-height: var(--form-ele-small1x);
      min-width: var(--form-ele-small1x);
      border-width: 1px;

      [class*='utds-icon-before-']::before {
        font-size: 1rem;
      }
    }

    &--small {
      font-size: .938rem;
      min-height: var(--form-ele-small);
      min-width: var(--form-ele-small);

      [class*='utds-icon-before-']::before {
        font-size: 1.125rem;
      }
    }

    &--large {
      font-size: 1.25rem;
      min-height: var(--form-ele-large);
      min-width: var(--form-ele-large);

      [class*='utds-icon-before-']::before {
        font-size: 1.45rem;
      }
    }

    &--large1x {
      font-size: 1.5rem;
      min-height: var(--form-ele-large1x);
      min-width: var(--form-ele-large1x);

      [class*='utds-icon-before-']::before {
        font-size: 1.7rem;
      }
    }

    // Does the icon button have a title?
    &--visible-title {
      padding: 0 var(--spacing-s);
      gap: var(--spacing-xs);
    }

  }
}