.rt-toggle-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.rt-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-toggle-container--min-height-xs {
  min-height: var(--container-min-height-xs);
}

.rt-toggle-container--min-height-sm {
  min-height: var(--container-min-height-sm);
}

.rt-toggle-container--min-height-md {
  min-height: var(--container-min-height-md);
}

.rt-toggle-container--min-height-lg {
  min-height: var(--container-min-height-lg);
}

.rt-toggle-container--min-height-xl {
  min-height: var(--container-min-height-xl);
}

.rt-toggle-container--min-width-xs {
  min-width: var(--container-min-width-xs);
}

.rt-toggle-container--min-width-sm {
  min-width: var(--container-min-width-sm);
}

.rt-toggle-container--min-width-md {
  min-width: var(--container-min-width-md);
}

.rt-toggle-container--min-width-lg {
  min-width: var(--container-min-width-lg);
}

.rt-toggle-container--min-width-xl {
  min-width: var(--container-min-width-xl);
}

.rt-layer-toggle {
  display: flex;
  width: var(--layer-toggle-min-width);
  height: var(--layer-toggle-height);
  cursor: pointer;
  padding: var(--layer-toggle-padding-top) var(--layer-toggle-padding-right)
    var(--layer-toggle-padding-bottom) var(--layer-toggle-padding-left);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.rt-layer-toggle--is-active {
  /* justify-content: flex-end; */
}

.rt-layer-toggle--disabled {
  pointer-events: none;
}

.rt-layer-toggle--loading {
  pointer-events: none;
}

.rt-layer-toggle:not(.rt-layer-toggle--disabled):hover {
  .rt-toggle-knob {
    width: var(--toggle-knob-width-hovered);
  }
}

.rt-layer-toggle:not(.rt-layer-toggle--disabled):focus-within {
  .rt-toggle-knob {
    width: var(--toggle-knob-width-focused);
  }
}

.rt-layer-toggle:not(.rt-layer-toggle--disabled):active {
  .rt-toggle-knob {
    width: var(--toggle-knob-width-pressed);
  }
}

.rt-toggle__native {
  position: absolute;
  opacity: 0;
  padding: 0;
  margin: 0;
  z-index: -1;
  left: 0;
  top: 0;
}

.rt-layer-toggle--primary {
  border-radius: var(--layer-toggle-border-radius-top-left-primary)
    var(--layer-toggle-border-radius-top-right-primary)
    var(--layer-toggle-border-radius-bottom-right-primary)
    var(--layer-toggle-border-radius-bottom-left-primary);

  .rt-toggle-knob {
    border-radius: var(--toggle-knob-border-radius-top-left-primary)
      var(--toggle-knob-border-radius-top-right-primary)
      var(--toggle-knob-border-radius-bottom-right-primary)
      var(--toggle-knob-border-radius-bottom-left-primary);
  }
}

.rt-layer-toggle--secondary {
  border-radius: var(--layer-toggle-border-radius-top-left-secondary)
    var(--layer-toggle-border-radius-top-right-secondary)
    var(--layer-toggle-border-radius-bottom-right-secondary)
    var(--layer-toggle-border-radius-bottom-left-secondary);

  .rt-toggle-knob {
    border-radius: var(--toggle-knob-border-radius-top-left-secondary)
      var(--toggle-knob-border-radius-top-right-secondary)
      var(--toggle-knob-border-radius-bottom-right-secondary)
      var(--toggle-knob-border-radius-bottom-left-secondary);
  }
}

.rt-toggle-knob {
  width: var(--toggle-knob-width-enabled);
  height: calc(
    100% - var(--layer-toggle-padding-top) - var(--layer-toggle-padding-bottom)
  );
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04),
    0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 3px 1px 0px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  transition: 0.2s;
  top: var(--layer-toggle-padding-top);
  left: var(--layer-toggle-padding-left);
}

.rt-toggle-knob:dir(rtl) {
  left: unset;
  right: var(--layer-toggle-padding-right);
}

.rt-toggle-knob--is-active {
  left: calc(100% - var(--layer-toggle-padding-left));
  transform: translateX(-100%);
}

.rt-toggle-knob--is-active:dir(rtl) {
  left: unset;
  right: calc(100% - var(--layer-toggle-padding-right));
  transform: translateX(100%);
}

.rt-toggle-knob--loading {
  opacity: 0;
}