.icon {
  &-std {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid $base-white;
    border-radius: $base-border-radius !important;
    cursor: pointer;
  }

  &-sml {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid $base-white;
    border-radius: $base-border-radius !important;
    cursor: pointer;
  }

  @each $color, $value in $base-button-colors {
    &-#{$color}-solid {
      background: map_get($value, 'default');
      color: $base-white;
      border-color: map_get($value, 'default');

      &:hover {
        background: map_get($value, 'hover');
        border-color: map_get($value, 'hover');
      }

      &:active {
        background: map_get($value, 'active');
        border-color: map_get($value, 'active');
      }

      &.disabled {
        background: $alto-200;
        border-color: $alto-200;
        color: $nobel-300;
        cursor: not-allowed;
      }
    }

    &-#{$color}-outline {
      background: transparent;
      color: map_get($value, 'default');
      border-color: map_get($value, 'default');

      &:hover {
        background: map_get($value, 'o-hover-fill');
        border-color: map_get($value, 'o-hover-border');
      }

      &:active {
        background: map_get($value, 'o-active-fill');
        border-color: map_get($value, 'o-active-border');
      }

      &.disabled {
        background: $gallery-100;
        border-color: $gallery-100;
        color: $nobel-300;
        cursor: not-allowed;
      }
    }
  }

  @each $color, $value in $base-button-colors {
    &-#{$color}-txt {
      background: transparent;
      color: map-get($value, 'default');
      border: 1px solid transparent;

      &:hover {
        background: map_get($value, 'o-hover-fill');
      }

      &:active {
        background: map_get($value, 'o-active-fill');
      }

      &.disabled {
        background: $base-white;
        color: $nobel-300;
        cursor: not-allowed;
      }
    }
  }

  &-primary-only {
    background: transparent;

    &:hover {
      border-color: $sky-blue-500-10p;
      background: $sky-blue-500-10p;
    }

    &:active {
      border-color: $sky-blue-500-20p;
      background: $sky-blue-500-20p;
    }

    &.disabled {
      background: $base-white;
      cursor: not-allowed;
    }
  }
}