// Any changes made here should be reflected in the decorative checkbox styles also (see ng-select stylesheet)

// This stylesheet affects checkboxes and the select all checkbox

.checkbox
{
    margin-bottom: 15px;
}

.checkbox-input
{
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    clip: rect(0,0,0,0);
    overflow: hidden;
    opacity: 0;
    -webkit-appearance: none;
    pointer-events: none;

    + .checkbox-label
    {
        display: inline;
        position: relative;
        vertical-align: middle;
        padding-left: 22px;
        line-height: 17px;
        cursor: pointer;

        &::before
        {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 16px;
            border: 1px solid $border-color-primary;
            background: $coconut;
        }
    }

    &:checked,
    &[aria-checked="mixed"],
    &[aria-checked="true"]
    {
        + .checkbox-label
        {
            &::before
            {
                border: transparent;
                background: $accent-color-primary;
            }
        }
    }

    &:checked,
    &[aria-checked="true"]
    {
        + .checkbox-label // checkmark
        {
            &::after
            {
                content: $icon-checkmark;
                position: absolute;
                top: 0;
                left: 0;
                color: $coconut;
                font-family: $font-family-icon;
                font-weight: $font-weight-semi-bold;
                font-size: 16px;
                transform: scale(0.75);
            }
        }
    }

    &[aria-checked="mixed"]
    {
        + .checkbox-label // dash
        {
            &::after
            {
                content: $icon-dash;
                position: absolute;
                left: 1px;
                color: $coconut;
                font-family: $font-family-icon;
                font-weight: $font-weight-semi-bold;
                font-size: 16px;
                transform: scale(0.75);
            }
        }
    }

    &:focus,
    &:focus:checked
    {
        + .checkbox-label
        {
            &::before
            {
                box-shadow: $box-shadow-focus-default;
            }
        }
    }

    &:disabled
    {
        + .checkbox-label
        {
          cursor: not-allowed;

          &::before
          {
            opacity: 0.5;
          }
        }
    }
}