/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}switchMode {

  /* Save root element context for easy access if nesting is needed */

  $self: &;


  /* properties of current element  + media queries */
  position: relative;
  display: inline-flex;
  align-items: center;
  @include custom-prop-fallback("background-color", "sys-color-background-primary-120");
  padding: map-deep-get($token-spacer-inset-map, "xs");
  border-radius: map-deep-get($token-spacer-unit-map, "40");

  /* Pseudo Elements */

  &::before {
  }

  &::after {
  }

  /*
  Include elements that are linked to the current element but have to reside at the root level of the stylesheet
  (e.g: keyframes)
  */
  @at-root {
  }


  /* children - write selector in full in comments in order to facilitate search */

  // switchTheme__childElement
  &__label {

    padding: map-deep-get($token-spacer-inset-map, "sm") map-deep-get($token-spacer-inset-map, "md");
    @include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
    flex: 1 1 0;
    z-index: map-deep-get($token-z-index-map, "low");
    font-weight: map-deep-get($token-font-weight-map, "bold");
    font-size: map-deep-get($token-font-size-map, "body", "xs");
    line-height: map-deep-get($token-font-line-height-map, "l");
    border-radius: map-deep-get($token-spacer-unit-map, "40");
    cursor: pointer;

  }

  &__input {

    overflow: hidden;
    position: absolute;
    opacity: 0;

    &[value="dark"]:checked ~ span {

      left: map-deep-get($token-spacer-unit-map, "4");

    }

    &[value="auto"]:checked ~ span {

      left: 65px;

    }
    &[value="light"]:checked ~ span {

      left: 127px;

    }

  }

  &__bg {

    width: 61px;
    height: map-deep-get($token-spacer-unit-map, "32");
    border-radius: map-deep-get($token-spacer-unit-map, "40");
    @include custom-prop-fallback("background-color", "sys-color-background-primary-80");
    position: absolute;
    left: 65px;
    top: map-deep-get($token-spacer-unit-map, "4");
    z-index: map-deep-get($token-z-index-map, "zero");
    transition: all .3s ease-out;

  }


  /* modifiers */

  // switchTheme -altStyle
  &.-altStyle {

    // follows same logic as base element

  }

  /* random parent element */
  /*
  *
  *   Syntax : .randomParentElt & {}
  *
  */

  /* Pseudo Classes */

  &:hover {
    @media (hover: hover) {

    }
  }

  &:focus {
  }

  &:active {
  }

  &:focus,
  &:active {
  }

}