@use '/src/styles/variables.sass' as vars
@use '/src/styles/breakpoint.sass' as view
@use 'sass:color'

$toggleOffColor: rgba(126, 206, 241, 0.286)
$toggleOnColor: rgba(53, 155, 80, 0.993)

.section
  display: flex
  flex-direction: row
  align-items: flex-start
  padding: 2rem
  border: vars.$componentBorder
  border-radius: vars.$borderRadius
  background-color: vars.$componentBackground
  color: vars.$textColor
  font-family: 'Inter', sans-serif
  gap: 2rem

  @media screen and (max-width: view.$tablet)
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    padding: 2rem
    border: 1px solid rgba(255, 255, 255, 0.3)
    border-radius: 16px
    color: #ffffff
    font-family: 'Inter', sans-serif

.toggle--group
  display: flex
  flex-direction: column
  justify-content: flex-start
  align-items: flex-start
  padding: 0 2rem 0 0
  margin: 0

.right--side
  display: flex
  flex-direction: column

.slider--group
  padding: 0 0 0 1rem
  flex-grow: 0

  @media screen and (max-width: view.$tablet)
    padding: 0 2rem 0 2rem
    justify-content: center
    align-items: center

.display--group
  padding: 3rem 1rem 1rem 1rem

.toggle
  color: white
  padding: 0.25rem 0
  display: flex
  flex-direction: row
  gap: 0.5rem
  align-items: center
  height: auto

  &__text
    font-size: 1rem

  &__switch
    visibility: hidden
    width: 0
    height: 0

    &:checked + label
      background-color: $toggleOnColor
      transition: background-color 0.5s ease-in-out

    &:checked + label:after
      left: calc(100% - 6px)
      transform: translateX(-70%)

.password-display
  display: flex
  flex-direction: column
  justify-content: flex-start
  align-items: flex-start
  color: #ffffff
  // margin-top: 20px
  // border: 1px solid #ffffff
  // padding: 1rem
  // border-radius: 5px
  // width: 30rem

  &__label
    font-weight: bold
    margin: 1rem 0 -0.5rem 0

  &__content
    border: 1px solid color.adjust(vars.$background, $lightness: 20%)
    background-color: color.adjust(vars.$background, $lightness: 5%)
    color: color.adjust(vars.$background, $lightness: 80%)
    width: 23rem
    height: auto
    padding: 1rem
    border-radius: 5px
    text-align: left
    word-wrap: break-word
    letter-spacing: 1px
    font-size: 1rem
    font-weight: 500
    font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily

.button--group
  display: flex
  flex-direction: row
  justify-content: flex-start
  gap: 1rem
  // margin-top: 20px
  // border: 1px solid #ffffff
  // padding: 1rem
  // border-radius: 5px
  width: 30rem
  margin: 1rem 0 0 0

.slider
  display: flex
  flex-direction: column
  align-items: center
  user-select: none
  touch-action: none
  margin: 1rem 0 0 0
  gap: 0.5rem
  width: 41rem
  cursor: pointer

  &__label
    display: flex
    flex-direction: row
    gap: 0.5rem
    width: 100%

  &__track
    background-color: hsl(240 6% 90%)
    position: relative
    border-radius: 9999px
    height: 8px
    width: 100%

  &__range
    position: absolute
    background-color: $toggleOnColor
    border-radius: 9999px
    height: 100%

  &__thumb
    display: block
    width: 16px
    height: 16px
    background-color: $toggleOnColor
    border-radius: 9999px
    top: -4px

    &:hover
      box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)

    &:focus
      outline: none
      box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)

  @media screen and (max-width: view.$tablet)
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    text-align: center
    width: 100vw

.alert
  border-radius: 6px
  padding: 1rem 1.25rem
  background-color: rgba(12, 31, 39, 0.991)
  border: 1px solid color.adjust($toggleOffColor, $lightness: 2%)
  color: rgba(126, 206, 241, 0.748)
  font-size: 1.25rem

.alert--container
  position: fixed
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  z-index: 1000

.checkbox
  display: inline-flex
  align-items: center

  &__control
    height: 20px
    width: 20px
    border-radius: 6px
    background-color: #e5e8ec
    cursor: pointer

  &__input:focus-visible + &__control
    // outline: 2px solid hsl(200 98% 39%)
    outline-offset: 2px

  &__control[data-checked]
    border-color: color.adjust($toggleOnColor, $blackness: 20%)
    background-color: $toggleOnColor
    color: white

  &__label
    display: none
    margin-left: 6px
    color: hsl(240 6% 10%)
    font-size: 14px
    user-select: none