$button-content: '.button-core__content';

.composer-button {
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  background-color: transparent;
  color: var(
    --wds-color-text-standard-primary,
    var(--wsr-color-D10, #000624)
  );
  width: 100%;

  /*
   * A block's own declarations always compile ahead of its nested rules
   * (dart-sass groups them regardless of source position), so `&__tooltip`
   * is written after the root's own properties to match the emitted order.
   * Safe either way: `.composer-button` and `.composer-button__tooltip`
   * never tie on specificity for the same element.
   */
  &__tooltip {
    max-width: 100%;
  }

  &__tooltip .popover__element {
    max-width: 100%;
    display: inline-flex;
  }

  & #{$button-content} {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  /* disabled — the label is a `Text` root, whose own skin/disabled colour rules
     carry two classes; the doubled root class keeps this above them */
  &--disabled,
  &#{&}--disabled &__label {
    color: var(--wds-color-text-disabled, var(--wsr-color-D55, #CFD1DC));
    cursor: default;
  }

  &--disabled &__icon-container {
    background-color: var(
      --wds-color-fill-standard-tertiary-disabled,
      var(--wsr-color-D80, #FFFFFF)
    );
    border: 1px solid
      var(
        --wds-color-border-standard-tertiary-disabled,
        var(--wsr-color-D60, #DFE5EB)
      );
  }

  &__icon-container {
    width: var(--wds-button-size-medium, var(--wds-space-600, 36px));
    height: var(--wds-button-size-medium, var(--wds-space-600, 36px));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  /* shape */
  &__icon-container--shape-round {
    border-radius: var(--wds-border-radius-full, 100%);
  }

  &__icon-container--shape-square {
    border-radius: var(--wds-border-radius-300, 6px);
  }

  /* standard */
  &__icon-container--color-standard {
    background-color: var(--wds-color-white);
    border: 1px solid var(--wds-color-border-standard-tertiary, #dfe5eb);
  }

  &--color-standard:active &__icon-container {
    border: 1px solid var(--wds-color-border-standard-tertiary-hover, #d6e6fe);
    background-color: var(--wds-color-fill-standard-tertiary-hover, #e7f0ff);
  }

  @media (hover: hover) {
    &--color-standard:hover &__icon-container {
      border: 1px solid var(--wds-color-border-standard-tertiary-hover, #d6e6fe);
      background-color: var(--wds-color-fill-standard-tertiary-hover, #e7f0ff);
    }
  }

  /* blue */
  &__icon-container--color-blue {
    background-color: #1684ea26;
    border: 1px solid #1684ea1a;
  }

  &--color-blue:active &__icon-container {
    background-color: #1684ea4d;
    border: 1px solid #1684ea33;
  }

  @media (hover: hover) {
    &--color-blue:hover &__icon-container {
      background-color: #1684ea4d;
      border: 1px solid #1684ea33;
    }
  }

  /* cyan */
  &__icon-container--color-cyan {
    background-color: #17b0e226;
    border: 1px solid #17b0e21a;
  }

  &--color-cyan:active &__icon-container {
    background-color: #17b0e24d;
    border: 1px solid #17b0e233;
  }

  @media (hover: hover) {
    &--color-cyan:hover &__icon-container {
      background-color: #17b0e24d;
      border: 1px solid #17b0e233;
    }
  }

  /* teal */
  &__icon-container--color-teal {
    background-color: #e2f1f1;
    border: 1px solid #d1e9e9;
  }

  &--color-teal:active &__icon-container {
    background-color: #c5e2e3;
    border: 1px solid #aad5d6;
  }

  @media (hover: hover) {
    &--color-teal:hover &__icon-container {
      background-color: #c5e2e3;
      border: 1px solid #aad5d6;
    }
  }

  /* green */
  &__icon-container--color-green {
    background-color: #1f884526;
    border: 1px solid #1f88451a;
  }

  &--color-green:active &__icon-container {
    background-color: #1f88454d;
    border: 1px solid #1f884533;
  }

  @media (hover: hover) {
    &--color-green:hover &__icon-container {
      background-color: #1f88454d;
      border: 1px solid #1f884533;
    }
  }

  /* purple */
  &__icon-container--color-purple {
    background-color: #6544f926;
    border: 1px solid #6544f91a;
  }

  &--color-purple:active &__icon-container {
    background-color: #6544f94d;
    border: 1px solid #6544f933;
  }

  @media (hover: hover) {
    &--color-purple:hover &__icon-container {
      background-color: #6544f94d;
      border: 1px solid #6544f933;
    }
  }

  /* violet */
  &__icon-container--color-violet {
    background-color: #59005f26;
    border: 1px solid #59005f1a;
  }

  &--color-violet:active &__icon-container {
    background-color: #59005f4d;
    border: 1px solid #59005f33;
  }

  @media (hover: hover) {
    &--color-violet:hover &__icon-container {
      background-color: #59005f4d;
      border: 1px solid #59005f33;
    }
  }

  /* pink */
  &__icon-container--color-pink {
    background-color: #d0409126;
    border: 1px solid #d040911a;
  }

  &--color-pink:active &__icon-container {
    background-color: #d040914d;
    border: 1px solid #d0409133;
  }

  @media (hover: hover) {
    &--color-pink:hover &__icon-container {
      background-color: #d040914d;
      border: 1px solid #d0409133;
    }
  }

  /* orange */
  &__icon-container--color-orange {
    background-color: #f36e1b26;
    border: 1px solid #f36e1b1a;
  }

  &--color-orange:active &__icon-container {
    background-color: #f36e1b4d;
    border: 1px solid #f36e1b33;
  }

  @media (hover: hover) {
    &--color-orange:hover &__icon-container {
      background-color: #f36e1b4d;
      border: 1px solid #f36e1b33;
    }
  }

  /* red */
  &__icon-container--color-red {
    background-color: #cc180b26;
    border: 1px solid #cc180b1a;
  }

  &--color-red:active &__icon-container {
    background-color: #cc180b4d;
    border: 1px solid #cc180b33;
  }

  @media (hover: hover) {
    &--color-red:hover &__icon-container {
      background-color: #cc180b4d;
      border: 1px solid #cc180b33;
    }
  }

  /* label */
  &__label {
    margin-top: var(--wds-space-150, 9px);
  }
}