$special-button-variant-colors: (
  "light": (
    "bg-default": map-get($silicon-shades, lighten5),
    "border-default": map-get($carbon-shades, lighten3),
    "text-default": $body-color,
    "bg-hover": map-get($silicon-shades, lighten4),
    "border-hover": map-get($carbon-shades, lighten2),
    "text-hover": $body-color,
    "bg-active": map-get($silicon-shades, lighten3),
    "border-active": map-get($carbon-shades, lighten1),
    "text-active": $body-color,
  ),
  "paper": (
    "bg-default": $chemstrap-white,
    "border-default": $chemstrap-white,
    "text-default": $body-color,
    "bg-hover": map-get($silicon-shades, lighten5),
    "border-hover": map-get($carbon-shades, lighten5),
    "text-hover": $body-color,
    "bg-active": map-get($silicon-shades, lighten4),
    "border-active": map-get($silicon-shades, lighten4),
    "text-active": $body-color,
  ),
  "knock-out": (
    "bg-default": transparent,
    "border-default": transparent,
    "text-default": map-get($carbon-shades, lighten2),
    "bg-hover": transparent,
    "border-hover": transparent,
    "text-hover": $body-color,
    "bg-active": transparent,
    "border-active": transparent,
    "text-active": $chemstrap-blue-dark,
  ),
);

$simple-button-variants: (
  "primary": $primary,
  "secondary": $secondary,
  "danger": $danger,
  "success": $success,
  "warning": $warning,
);

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.5em;
  &.modal-title,
  &.accordion-header,
  &.popover-header {
    margin-top: 0;
  }
}

@mixin chemstrap-button-variant($name) {
  @include button-variant(
    map-get(map-get($special-button-variant-colors, $name), "bg-default"),
    map-get(map-get($special-button-variant-colors, $name), "border-default"),
    map-get(map-get($special-button-variant-colors, $name), "text-default"),
    map-get(map-get($special-button-variant-colors, $name), "bg-hover"),
    map-get(map-get($special-button-variant-colors, $name), "border-hover"),
    map-get(map-get($special-button-variant-colors, $name), "text-hover"),
    map-get(map-get($special-button-variant-colors, $name), "bg-active"),
    map-get(map-get($special-button-variant-colors, $name), "border-active"),
    map-get(map-get($special-button-variant-colors, $name), "text-active"),
    map-get(map-get($special-button-variant-colors, $name), "bg-default"),
    map-get(map-get($special-button-variant-colors, $name), "border-default"),
    map-get(map-get($special-button-variant-colors, $name), "text-default")
  );
}

// special chemstrap button variants
@each $name, $colors in $special-button-variant-colors {
  .btn-#{$name} {
    @include chemstrap-button-variant($name);
  }
}

// simple chemstrap button variants

@each $name, $color in $simple-button-variants {
  .btn-#{$name} {
    @include button-variant(
      $color,
      $color,
      $white,
      $hover-color: $white,
      $active-color: $white,
      $disabled-color: $white
    );
  }
}

@mixin xsm-form-elements {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  @include condensed-text-width;
}

@mixin xxsm-form-elements {
  padding: 3px 4px;
  font-size: 12px;
  line-height: 1;
  border-radius: 2.5px;
  @include condensed-text-width;
}

.btn-sm {
  @include condensed-text-width;
}

.btn-xsm {
  @include xsm-form-elements;
}

.btn-xxsm {
  @include xxsm-form-elements;
}

.input-group-sm > {
  @include condensed-text-width;
}

.input-group-xsm > {
  .form-control,
  .form-select,
  .input-group-text,
  .btn {
    @include xsm-form-elements;
  }
}

.input-group-xxsm > {
  .form-control,
  .form-select,
  .input-group-text,
  .btn {
    @include xxsm-form-elements;
  }
}

.popover-multi-item {
  &:not(:first-child) .popover-header {
    border-top-left-radius: 0;
  }
  &:not(:last-child) {
    border-right: var(--bs-popover-border-width) solid
      var(--bs-popover-border-color);
    .popover-header {
      border-top-right-radius: 0;
    }
  }
}

.input-group {
  z-index: 0;
}

.accordion-button {
  @extend .justify-content-between;
  @extend .surface-lighten4;
  @extend .border-0;
  &::after {
    content: "\f078";
    font-family: "FontAwesome";
    background-image: none !important;
    @extend .bg-draggable;
    @extend .rounded-circle;
    width: 24px;
    height: 24px;
    @extend .text-white;
    @extend .d-flex;
    @extend .align-items-center;
    @extend .justify-content-center;
    @extend .ms-2;
  }
  &:hover::after {
    padding-top: 3px;
  }
  &:not(.collapsed) {
    &::after {
      transform: rotate(180deg);
      @extend .surface-base;
    }
  }
  &.accordion-button--icon-only {
    width: auto;
    background: transparent !important;
    &::after {
      @extend .ms-0;
    }
  }
}
