import { css } from 'lit';

export default css`
  :host{
    --slide-toggle-width:auto;
    display:inline-block;
    width:var(--slide-toggle-width);
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
  }

  .nile-slide-toggle {
    display: inline-flex;
    align-items: baseline;
    justify-content:space-between;
    width:100%;
  }

  .nile-slide-toggle--reverse{
    flex-direction:row-reverse;
  }

  .nile-slide-toggle__switch {
    flex: 0 0 auto;
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    line-height: var(--nile-height-22px, var(--ng-height-20px));
  }

  .nile-slide-toggle__switch--left{
    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
  }

  .nile-slide-toggle__switch--right{
    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
  }

  .nile-slide-toggle__label {
    display: flex;
    flex-direction: column;
    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    letter-spacing: 0.2px;
    font-style: normal;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
  }

  .nile-slide-toggle__sublabel {
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    letter-spacing: 0.2px;
    font-style: normal;
    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
  }

  .nile-slide--disabled .nile-slide-toggle__label,
  .nile-slide--disabled .nile-slide-toggle__sublabel{
    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
  }

  .nile-slide-toggle__switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .nile-slide-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));
    transition: 0.4s;
    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
  }

  .nile-slide-toggle__slider:active {
    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
  }

  .nile-slide-toggle__slider:focus {
    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
  }

  .nile-slide-toggle__slider:hover {
    &:not(.nile-slide--disabled) {
      background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-quaternary-alt));
    }
  }

  .nile-slide-toggle__slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    bottom: 2px;
    left: 2px;
    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
    transition: 0.4s;
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
  }

  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
  }

  .nile-slide-toggle__switch:hover input:checked + .nile-slide-toggle__slider {
    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
  }

  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
  }

  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
    transform: translateX(16px);
  }

  .nile-slide-toggle__slider.round {
    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
  }

  .nile-slide-toggle__slider.round:before {
    border-radius: var(--nile-radius-full, var(--ng-radius-full));
  }

  .nile-slide--disabled .nile-slide-toggle__slider {
    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
  }

  .nile-slide--disabled .nile-slide-toggle__switch {
    pointer-events: none;
    cursor: not-allowed;
  }

  .nile-slide--disabled
    .nile-slide-toggle__switch
    input:checked
    + .nile-slide-toggle__slider {
    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
  }
  .nile-slide--disabled {
   cursor: not-allowed;
  }

`;