@import "../mixins/switchers";

.c-checkbox {
  $self: #{&};
  $label: #{$self}__label;
  $content: #{$self}__content;
  $toggle: #{$self}__toggle;
  $toggle-mark: #{$toggle}-mark;
  $toggle-box: #{$toggle}-box;
  $toggle-shadow: #{$toggle}-shadow;

  @at-root {

    #{$self} {
      display: inline-flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      font-size: 1rem;
      @include no-select();

      &:hover,
      &:focus {
        #{$toggle} {
          box-shadow: $check-toggle-shadow;
        }

        #{$toggle-shadow} {
          opacity: 1;
          transform: scale(2);
        }
      }

      &:active {
        #{$toggle-shadow} {
          background-color: $check-shadow-press-color;
        }
      }

      input {
        &:not(:checked),
        &:checked {
          display: none;
          opacity: 0;
        }
      }

      &.is-active {
        &:active {
          #{$toggle-shadow} {
            background-color: $check-active-shadow-press-color
          }
        }

        #{$toggle-box} {
          border-color: $check-active-color;
          background-color: $check-active-color;
        }

        #{$toggle-mark} {
          opacity: 1;
          transform: scale(1);
        }

        #{$toggle-shadow} {
          background-color: $check-active-shadow-color;
        }

      }
    }

    #{$toggle} {
      position: relative;
      z-index: 1;
      width: 1em;
      height: 1em;
      font-size: 1.25em;
      border-radius: $checkbox-border-radius;
    }

    #{$toggle-mark} {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      opacity: 0;
      transform: scale(0);
      background: $checkbox-mark-checked-background no-repeat center / 90%;
      transition: opacity $check-transition, transform $check-transition;
    }

    #{$toggle-box} {
      display: inline-block;
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: $check-toggle-border;
      border-radius: $checkbox-border-radius;
      transition: background-color $check-transition, border-color $check-transition;
    }

    #{$toggle-shadow} {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-color: $check-shadow-color;
      border-radius: 50%;
      transform: scale(1);
      transition: transform $check-transition, opacity $check-transition, background-color $check-transition;
    }

    #{$label} {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      padding: $check-label-padding;
      margin: 0;
      cursor: pointer;
    }

    #{$content} {
      display: block;
      padding: $check-content-padding;
    }
  }
}