.button {
  &-std {
    letter-spacing: 0.5px;
    font-family: $base-font-family;
    font-weight: 500;
    border: 1px solid $base-white;
    border-radius: $base-border-radius !important;
    padding: $base-spacing $base-spacing-2x;
    font-size: $base-font-size;
    line-height: 1;
    outline: none;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
    }
  }

  &-sml {
    letter-spacing: 0.5px;
    font-family: $base-font-family;
    font-weight: 500;
    border: 1px solid $base-white;
    border-radius: $base-border-radius !important;
    padding: 13px 26px;
    font-size: 13px;
    line-height: 1.0625;
    outline: none;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
    }
  }

  @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;
      }
    }
  }

  &-secondary-txt-dark {
    background: transparent;
    color: $base-white;
    border: 1px solid transparent;

    &:hover {
      background: $base-white-10p;
    }

    &:active {
      background: $base-white-20p;
    }

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

  @each $color, $value in $dark-button-colors {
    &-#{$color}-outline-dark {
      background: transparent;
      color: $base-white;
      border-color: $base-white;

      &:hover {
        background: $base-white-10p;
      }

      &:active {
        background: $base-white-20p;
      }

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

  &-primary-lnk {
    background: transparent;
    color: map-get($base-primary-button, 'default');
    border: 1px solid transparent;
    text-decoration: underline;

    &:hover {
      color: map_get($base-primary-button, 'hover');
      text-decoration: underline;
    }

    &:active {
      color: map_get($base-primary-button, 'active');
    }

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

    }
  }

  &-separator {
    margin-left: $base-spacing-half;
    margin-right: $base-spacing-half;
  }
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: $base-spacing;

  a {
    text-align: center;
  }

  @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
    a:not(:only-child) {
      flex: 1;
    }
  }
}