@import '~styles/config';

.checkbox {
  height: 24px;

  &:hover &__check,
  &:focus &__check {
    border-color: darken($color-grey, 12%);
  }

  &:hover &__text,
  &:focus &__text {
    color: darken(#aaa, 14%);
  }

  &__label {
    display: flex;
    align-items: center;

    cursor: pointer;
    user-select: none;
  }

  &__group {
    position: relative;
    cursor: pointer;
  }

  &__check {
    display: block;

    margin: -24px 10px 0 0;

    width: 24px;
    height: 24px;

    border: 2px solid $color-grey400;

    transition:
      180ms border-color ease-in-out,
      180ms background-color ease-in-out;

    .isRadio & {
      position: relative;

      border-radius: 100%;
    }

    .large & {
      width: 34px;
      height: 34px;
    }
  }

  &__after {
    display: none;

    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;

    border-radius: 100%;
    background-color: transparent;

    transition: 180ms background-color ease-in-out;
  }

  &__input {
    opacity: 0;
  }

  &__input:checked + &__check {
    @include colorify('background-color');
    @include colorify('border-color');

    &::before {
      content: url('/assets/success.svg');

      display: block;

      position: absolute;
      top: -1px;
      left: 3px;

      font-size: 16px;

      .isRadio & { // stylelint-disable-line
        top: -2px;
        left: 3px;

      }
      .large & { // stylelint-disable-line
        top: 3px;
        left: 8px;
      }
    }

  }

  .submitted &__input:invalid:focus + &__check { // stylelint-disable-line
    border-color: $color-attention;
  }

  &__input:checked + &__check &__after {
    @include colorify('background-color');
  }

  &__text {
    @include responsive-font(14, 15);

    position: relative;
    top: 2px;

    color: #aaa;

    transition: color 180ms ease-in-out;

    svg { // stylelint-disable-line
      height: 40px;
      width: 40px;

      path { // stylelint-disable-line
        fill: $color-grey500;
      }
    }

    .large & {
      @include responsive-font(16, 17);
      color: $color-dark;
    }
  }

  a { // stylelint-disable-line
    color: $color-dark;
  }

}