$dark-fill: var(--wds-sidebar-minimize-action-fill-dark-default, #42454c);
$dark-text: var(
  --wds-sidebar-minimize-action-text-dark-default,
  var(--wds-color-black-550, #cfd1dc)
);
$light-fill: var(
  --wds-sidebar-minimize-action-fill-light-default,
  var(--wds-color-blue-400, #d6e6fe)
);
$light-fill-hover: var(
  --wds-sidebar-minimize-action-fill-light-default,
  var(--wds-color-blue-400, #a8caff)
);
$light-text: var(
  --wds-sidebar-minimize-action-text-light-default,
  var(--wds-color-blue-100, #116dff)
);
$tooltip-light: var(
  --wds-sidebar-minimize-tooltip-fill-light-default,
  var(--wds-color-white, var(--wsr-color-D80, #ffffff))
);

.sidebar-next-toggle-button {
  position: absolute;
  top: 12px;
  left: 100%;
  z-index: 1;

  /* the root is repeated so these keep the three-class weight the Stylable
     `.root:skin() .content` selectors had: Tooltip's own theme sheets set the
     same background at two classes, from the later theme layer */
  &#{&}--skin-dark .popover-content__content {
    background-color: var(
      --wds-sidebar-minimize-tooltip-fill-dark-default,
      #333850
    );
  }

  &#{&}--skin-light .popover-content__content {
    background-color: $tooltip-light;
  }

  /* five classes, matching the Stylable `.root:skin() Text:light.text`
     selector: Tooltip's own theme sheets set this colour at four */
  &#{&}#{&}#{&}--skin-light .tooltip__text {
    color: #333853 !important;
  }

  &#{&}--skin-neutral .popover-content__content {
    background-color: $tooltip-light;
  }

  @layer wds.composition {
    &#{&}#{&}#{&}--skin-neutral .tooltip__text {
      color: #333853;
    }
  }

  & &__icon-button svg {
    position: absolute;
    right: 2px;
  }

  &#{&} &__icon-button {
    background-color: $dark-fill;
    border-color: $dark-fill;
    color: $dark-text;
    box-shadow: var(
      --wsr-shadow30,
      0 6px 6px 0 rgba(22, 45, 61, 0.06),
      0 0 18px 0 rgba(22, 45, 61, 0.12)
    );
    padding-right: 2px;
    border-radius: 0 18px 18px 0;
    width: 18px;
    transition: width 0.2s cubic-bezier(0.79, 0.33, 0.14, 0.53);
  }

  @media (hover: hover) {
    &#{&} &__icon-button:hover {
      background-color: $dark-fill;
      border-color: $dark-fill;
      color: $dark-text;
      width: 24px;
    }
  }

  &#{&} &__icon-button--skin-light {
    background-color: $light-fill;
    border-color: $light-fill;
    color: $light-text;
  }

  @media (hover: hover) {
    &#{&} &__icon-button--skin-light:hover {
      background-color: $light-fill-hover;
      border-color: $light-fill-hover;
      color: $light-text;
    }
  }

  &#{&} &__icon-button--skin-light:active {
    background-color: $light-fill-hover;
    border-color: $light-fill-hover;
    color: $light-text;
  }

  &#{&} &__icon-button--skin-neutral {
    background-color: $light-fill;
    border-color: $light-fill;
    color: $light-text;
  }

  @media (hover: hover) {
    &#{&} &__icon-button--skin-neutral:hover {
      background-color: $light-fill-hover;
      border-color: $light-fill-hover;
      color: $light-text;
    }
  }

  &#{&} &__icon-button--skin-neutral:active {
    background-color: $light-fill-hover;
    border-color: $light-fill-hover;
    color: $light-text;
  }
}