zu 0.3.3

// Copyright (c) 2024 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
// Use of this source is governed by Lesser General Public License
// that can be found in the LICENSE file.


/* Styles for Switch */

/* Styles applied to the root element. */
.ZuSwitch-root {
  display: inline-flex;
  // 34 + 12 * 2
  width: 58px;
  // 14 + 12 * 2
  height: 38px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  // reset stack context.
  z-index: 0;
  vertical-align: middle;

  &.ZuSwitch-edgeStart {
    margin-left: -8xp;
  }

  &.ZuSwitch-edgeEnd {
    margin-right: -8px;
  }

  &.ZuSwitch-sizeSmall {
    width: 40px;
    height: 24px;
    padding: 7px;

    & .ZuSwitch-thumb {
      width: 16px;
      height: 16px;
    }

    & .ZuSwitch-switchBase {
      padding: 4px;

      &.ZuSwitchBase-checked {
        transform: translateX(16px);
      }
    }
  }
}

/* Styles applied to the root element if edge="start". */
.ZuSwitch-edgeStart {

}

/* Styles applied to the root element if edge="end". */
.ZuSwitch-edgeEnd {

}

/* Styles applied to the internal SwitchBase component's root element if color="primary". */
.ZuSwitch-colorPrimary {

}

/* Styles applied to the internal SwitchBase component's root element if color="secondary". */
.ZuSwitch-colorSecondary {

}

/* Styles applied to the root element if size="small". */
.ZuSwitch-sizeSmall {

}

/* Styles applied to the root element if size="medium". */
.ZuSwitch-sizeMedium {

}

/* Styles applied to the internal SwitchBase component's input element. */
.ZuSwitch-input {
  
}

/* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
.ZuSwitch-thumb {
  box-shadow: $zu-shadow-1;
  background-color: currentColor;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Styles applied to the track element. */
.ZuSwitch-track {
  height: 100%;
  width: 100%;
  border-radius: 7px;
  z-index: -1;

  transition: opacity $zu-duration-shortest $zu-easing-easeInOut 0ms,
    background-color $zu-duration-shortest $zu-easing-easeInOut 0ms;

  // TODO(Shaohua): onBackground variable.
  background-color: black;
  // TODO(Shaohua): switchTrack variable.
  opacity: 0.38;
}

.ZuSwitch-switchBase {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;  // Render above the focus ripple.
  // TODO(Shaohua): Change color based on theme.
  color: white;

  transition: left $zu-duration-shortest $zu-easing-easeInOut 0ms,
    transform $zu-duration-shortest $zu-easing-easeInOut 0ms;

  &.ZuSwitchBase-checked {
    transform: translateX(20px);
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    opacity: 0.5;
  }

  &.ZuSwitchBase-disabled {
    // TODO(Shaohua): Based on theme.
    color: $zu-colors-grey-100;
  }

  &.ZuSwitchBase-disabled + .ZuSwitch-track {
    opacity: 0.2;
  }

  &.ZuSwitch-input {
    left: -100%;
    width: 300%;
  }

  &:hover {
    // FIXME(Shaohua): hoverOpacity is undefined.
    //background-color: alpha(var(--zu-palette-action-active), var(--zu-palette-action-hoverOpacity));
    background-color: rgba(0, 0, 0, 0.04);

    @media (hover: none) {
      background-color: transparent;
    }
  }
}

// primary
.ZuSwitch-colorPrimary {
  &.ZuSwitchBase-checked {
    color: $zu-palette-primary-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-primary-main), var(--zu-palette-action-hoverOpacity));
      background-color: rgba(25, 118, 210, 0.04);

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-primary-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-primary-main;
  }
}

// secondary
.ZuSwitch-colorSecondary {
  &.ZuSwitchBase-checked {
    color: $zu-palette-secondary-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-secondary-main), var(--zu-palette-action-hoverOpacity));

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-secondary-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-secondary-main;
  }
}

// Success
.ZuSwitch-colorSuccess {
  &.ZuSwitchBase-checked {
    color: $zu-palette-success-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-success-main), var(--zu-palette-action-hoverOpacity));

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-success-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-success-main;
  }
}

// Info
.ZuSwitch-colorInfo {
  &.ZuSwitchBase-checked {
    color: $zu-palette-info-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-info-main), var(--zu-palette-action-hoverOpacity));

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-info-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-info-main;
  }
}

// Warning
.ZuSwitch-colorWarning {
  &.ZuSwitchBase-checked {
    color: $zu-palette-warning-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-warning-main), var(--zu-palette-action-hoverOpacity));

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-warning-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-warning-main;
  }
}

// Error
.ZuSwitch-colorError {
  &.ZuSwitchBase-checked {
    color: $zu-palette-error-main;

    &:hover {
      // FIXME(Shaohua):
      //background-color: alpha(var(--zu-palette-error-main), var(--zu-palette-action-hoverOpacity));

      @media (hover:none) {
        background-color: transparent;
      }
    }

    &.ZuSwitchBase-disabled {
      // TODO(Shaohua): call lighten() for light theme.
      color: $zu-palette-error-main;
    }
  }

  &.ZuSwitchBase-checked + .ZuSwitch-track {
    background-color: $zu-palette-error-main;
  }
}