// Name:            modetoggle
// Description:     Switch color scheme from three options: light, dark or system preference 
//
// Component:       `c-modetoggle`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
@use '../../../lib/components/menu/menu.scss' as *;

.c-modetoggle {

  // Custom properties
  // ======================================================================

  --modetoggle-icon: #{$ui-03};
  --modetoggle-icon-active: var(--icon-color);
  --modetoggle-tooltip-bg: var(--background-color);
  --modetoggle-tooltip-color: var(--body-color);
  --modetoggle-tooltip-width: 130px;
  --modetoggle-shadow: var(--global-shadow);

  // ======================================================================= 

  .c-menu & {
    --modetoggle-border: #{$menu-divider-color};
    --modetoggle-icon: #{$ui-01-50};
    --modetoggle-icon-active: #{$ui-01};

    border: 1px solid var(--modetoggle-border);
    border-radius: 1rem;
  }

  &__icon {
    stroke: var(--modetoggle-icon);

    &:hover,
    input[type="checkbox"]:checked+&,
    input[type="radio"]:checked+& {
      --modetoggle-icon: var(--modetoggle-icon-active);
    }

  }

  &__label {
    &:hover::after {
      display: block;
      position: absolute;
      top: 100%;
      left: calc(50% - (var(--modetoggle-tooltip-width) / 2));
      content: attr(aria-label);
      width: var(--modetoggle-tooltip-width);
      padding: $padding-small;
      background-color: var(--modetoggle-tooltip-bg);
      box-shadow: var(--modetoggle-shadow);
      color: var(--modetoggle-tooltip-color);
      text-align: center;
      white-space: nowrap;
      @include z(sky);
      @include type(label-08);
    }
  }
}