$prefix: "adui-button";

.#{$prefix}-group {
  display: inline-block;

  &_light {
    padding: 3px;
    background-color: var(--gray-50);
    border-radius: 6px;

    .#{$prefix} {
      &-mini {
        height: 20px;
        line-height: 20px;
      }
      &-small {
        height: 24px;
        line-height: 24px;
      }
      &-medium {
        height: 30px;
        line-height: 30px;
      }
      &-large {
        height: 36px;
        line-height: 36px;
      }
    }
  }

  .#{$prefix}-base {
    &:focus {
      z-index: 1;
    }

    &:hover {
      z-index: 2;
    }

    &.#{$prefix}-active {
      z-index: 3;
    }

    &:not(.#{$prefix}-light) {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        margin-right: 1px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    &.#{$prefix}-light {
      color: var(--gray-800);

      &:not(:last-child) {
        margin-right: 4px;
      }

      &:hover {
        color: var(--gray-900);

        &::after {
          opacity: 0;
        }
      }

      &.#{$prefix}-primary {
        &.#{$prefix}-active {
          color: var(--primary-color);
        }
      }

      &.#{$prefix}-warning {
        &.#{$prefix}-active {
          color: var(--ad-orange);
        }
      }

      &.#{$prefix}-danger {
        &.#{$prefix}-active {
          color: var(--ad-red);
        }
      }

      &.#{$prefix}-active {
        &::after {
          opacity: 0.2;
        }
      }
    }
  }

  &_banner {
    display: flex;

    button {
      flex: 1;
    }
  }
}