// Copyright (C) 2023 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:math';

.#{$prefix}-switch {
  align-items: center;
  background: none;
  background-color: $color-black-400;
  border: none;
  border-radius: $border-radius-circle;
  color: $color-black-100;
  display: flex;
  gap: 0.75rem;
  height: $spacing-xl;
  line-height: 1;
  padding: 0 0.75rem;
  position: relative;
  -webkit-appearance: none;

  &::after {
    background-color: $color-black-000;
    border-radius: $border-radius-circle;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%234C5A69" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>');
    background-size: $spacing-sm $spacing-sm;
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    height: $spacing-lg;
    left: $spacing-xxs;
    position: absolute;
    transition: left .2s ease;
    width: $spacing-lg;
  }

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-black-000, 0 0 0 $spacing-xxs $color-black-400;
    outline: none;
  }

  &:hover {
    cursor: pointer;
  }

  &[aria-checked="true"] {
    background-color: $color-green-500;
    border-color: $color-green-500;
    color: $color-green-100;

    &:focus {
      box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-black-000, 0 0 0 $spacing-xxs $color-green-500;
    }
  }

  &[aria-checked="true"]::after {
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23056E41" viewBox="0 0 16 16"><path d="m14.914 4-9.47 9.47L1.09 8.393 2.608 7.09l2.948 3.44L13.5 2.585 14.914 4Z"></path></svg>');
    left: calc(100% - ($spacing-lg + $spacing-xxs));
  }

  &--danger[aria-checked="true"] {
    background-color: $color-orange-500;
    border-color: $color-orange-500;
    color: $color-white-base;

    &:focus {
      box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-black-000, 0 0 0 $spacing-xxs $color-orange-500;
    }

    &::after {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23DF3603" viewBox="0 0 16 16"><path d="m3.5 2.086 4.5 4.5 4.5-4.5L13.914 3.5 9.414 8l4.5 4.5-1.414 1.414-4.5-4.5-4.5 4.5L2.086 12.5l4.5-4.5-4.5-4.5L3.5 2.086Z"></path></svg>');
    }
  }

// Medium variant is in review.
/*
  &--medium {
    height: $spacing-lg;
    gap: 0.25rem;

    &::after {
      height: $spacing-md;
      width: $spacing-md;
    }

    &[aria-checked="true"]::after {
      left: calc(100% - ($spacing-md + $spacing-xxs));
    }
  }
*/

  &--small {
    font-size: $ts-14;
    height: $spacing-md;
    gap: 0;
    padding: 0 $spacing-xs;

    &::after {
      background-size: ($spacing-sm * .75) ($spacing-sm * .75);
      height: $spacing-sm;
      width: $spacing-sm;
    }

    &[aria-checked="true"]::after {
      left: calc(100% - ($spacing-sm + $spacing-xxs));
    }
  }

  &[aria-checked="false"] &__on,
  &[aria-checked="true"] &__off {
    visibility: hidden;
  }
}