@import 'styles/settings';
@import 'styles/functions';

.c-checkbox {
  -webkit-font-smoothing: antialiased;
  font-family: $font-family-1;
  font-size: $font-size-default;

  > label {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    padding: 0 0 0 $space-1 * 3;
    width: auto;
    transform: none;
    font-size: $font-size-big;
    font-weight: 500;
    text-transform: none;
    line-height: 1;
    text-align: left;
    transition: color linear .1s;
    cursor: pointer;

    .checkbox-label-fake {
      position: absolute;
      top: 50%;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid palette(blue, light);
      border-radius: 2px;
      transform: translate(0, -50%);

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 1px;
        fill: palette(white);
        transform: translate(-50%,-50%) scale(0);
        transition: all $animation-time $ease-in-out-sine;
      }
    }
  }

  input[type=checkbox] {
    display: none;

    &:checked + label {
      > .checkbox-label-fake {
        border-color: palette(blue, secondary);
        background-color: palette(blue, secondary);

        > svg {
          transform: translate(-50%, -50%) scale(1);
        }
      }
    }
  }

  // themes
  &.-dark {
    .checkbox-label {
      color: palette(gray, dark);
    }
  }

  &.-light {
    .checkbox-label {
      color: palette(white);
    }
  }

  // disabled styles
  &.-disabled {
    pointer-events: none;
    cursor: default;

    input[type=checkbox] {
      &:checked + label {
        > .checkbox-label-fake {
          border-color: transparent;
          background-color: rgba(palette(blue, secondary), .4);

          > svg {
            fill: rgba(palette(white), .4);
          }
        }
      }
    }

    &.-dark {
      .checkbox-label {
        color: rgba(palette(gray, dark), .4);
      }
    }

    &.-light {
      .checkbox-label {
        color: rgba(palette(white), .4);
      }
    }
  }
}