@import '../../style/themes';
@import '../../style/mixins';

@mixin checkbox {
  &-group {
    display: inline-flex;
    flex-wrap: wrap;

    &-vertical {
      flex-direction: column;
    }
  }
  
  & {
    @include reset-component();
    
    display: inline-flex;
    align-items: center;
    margin-right: $margin-sm;
    white-space: nowrap;
    cursor: default;

    &-disabled {
      opacity: .6;
      filter: grayscale(100%);
      pointer-events: none;
    }

    &-focused {
      // outline: 2px further($gray, 8) solid;
    }

    &_input {
      width: 0;
      height: 0;
      padding: 0;
      margin: 0;
    }

    &_dot {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      border: 2px further($gray, 8) solid;
      box-sizing: border-box;
      transform: translateZ(0);
    }

    &_label {
      display: inline-block;
      padding: 0 $padding-xs;
    }

    &_dot {
      &::after {
        content: '\a0';
        visibility: hidden;
      }
    }
    &-checked &_dot {
      border-color: $primary-color;
      &::after {
        visibility: unset;
      }
    }
    
  }
}

.x-checkbox {
  @include checkbox();

  &:hover &_dot {
    border: 2px further($gray, 10) solid;
  }
  &:active &_dot {
    border-width: 0;
    background: further($gray, 7);
    filter: grayscale(100%);
  }

  &_dot {
    &::after {
      content: "✔";
      color: further($gray, 0);
    }
  }
  &-checked &_dot {
    border: 0;
    background: $primary-color;
  }
}