$light-fill: var(
  --wds-sidebar-minimize-action-fill-light-default,
  var(--wds-color-black-600)
);
$light-text: var(
  --wds-sidebar-minimize-action-text-light-default,
  var(--wds-color-text-standard-primary)
);

.sidebar-next-toggle-button {
  &#{&} &__icon-button {
    background-color: var(--wds-sidebar-minimize-action-fill-dark-default, #42454c);
    border-color: var(--wds-sidebar-minimize-action-fill-dark-default, #42454c);
  }

  @media (hover: hover) {
    &#{&} &__icon-button:hover {
      background-color: var(--wds-sidebar-minimize-action-fill-dark-default, #42454c);
      border-color: var(--wds-sidebar-minimize-action-fill-dark-default, #42454c);
    }
  }

  &#{&} &__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;
      border-color: $light-fill;
      color: $light-text;
    }
  }

  &#{&} &__icon-button--skin-light:active {
    background-color: $light-fill;
    border-color: $light-fill;
    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;
      border-color: $light-fill;
      color: $light-text;
    }
  }

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