@import '../scss/init.scss';

@mixin checkbox--unchecked() {
  @include roundCorner;
  width: 16px;
  height: 16px;
  position: relative;
  border: 2px solid $c_text_secondary;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 175ms;
    background-position: center;
    background-repeat: no-repeat;
    background-color: $c_primary;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
    transform: scale(0.5);
    opacity: 0;
  }
}

@mixin checkbox--checked() {
  border-color: $c_primary;

  &::before {
    opacity: 1;
    transform: scale(1);
  }
}


.checkbox {
  @include center;
  width: 36px;
  height: 36px;
  position: relative;

  input {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

  }

  &_appearance {

    @include checkbox--unchecked;
  }

  input:checked + &_appearance {
    @include checkbox--checked;
  }
}

.checkbox--accent {
  .checkbox_appearance::before {
    background-color: $c_accent;
  }

  input:checked + .checkbox_appearance {
    border-color: $c_accent;
  }
}

.radio {
  position: relative;
  width: 36px;
  height: 36px;
  @include center;

  input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
  }

  &_appearance {
    position: relative;
    width: 100%;
    height: 100%;


    &::before {
      content: '';
      position: absolute;
      @include circle(16px);
      border: 2px solid rgba(black, 0.54);
      top: 50%;
      left: 50%;
      margin-left: -8px;
      margin-top: -8px;
      transition: 175ms;
    }

    &::after {
      content: '';
      @include circle(8px);
      background-color: $c_primary;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      margin-left: -4px;
      margin-top: -4px;
      transition: 175ms;
      transform: scale(0);
    }
  }

  input:checked + &_appearance {
    &::before {
      border-color: $c_primary;
    }

    &::after {
      transform: scale(1);
    }
  }
}

.radio--accent {
  .radio_appearance::after {
    background-color: $c_accent;
  }

  input:checked + .radio_appearance {
    &::before {
      border-color: $c_accent;
    }
  }
}