@import '../../functions', '../../mixins', '../../variables';

$pretty-checkbox: (
  'width': 24,
  'border': 1,
  'border-radius': 4,
  'tick-width': 11,
  'tick-height': 8,
  'top': 4,
  'margin-top': -4,
  'margin-left': -5.5,
);

@layer components {
  .pretty-checkbox {
    width: px-to-rem(get-map($pretty-checkbox, 'width'));
    height: px-to-rem(get-map($pretty-checkbox, 'width'));
    position: absolute;
    top: px-to-rem(get-map($pretty-checkbox, 'top'));
    left: 0;
    border: px-to-rem(get-map($pretty-checkbox, 'border')) solid
      get-map($theme, 'form_field_border');
    border-radius: px-to-rem(get-map($pretty-checkbox, 'border-radius'));
    box-sizing: border-box;
    outline: none;
    z-index: 10;

    input:focus + &,
    button:focus & {
      box-shadow: $outline get-map($theme, 'default_focus');
    }

    input:checked + &,
    .selected & {
      background: get-map($theme, 'form_checkbox_bg');
      border-color: get-map($theme, 'form_checkbox_border');

      &:not(.radio)::before {
        @include image('icons/tick.svg', true);

        content: '';
        width: px-to-rem(get-map($pretty-checkbox, 'tick-width'));
        height: px-to-rem(get-map($pretty-checkbox, 'tick-height'));
        background: get-map($theme, 'form_checkbox_icon');
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
        margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
      }
    }
  }
}
