@import './colors';
@import './functions';

@mixin hc-checkbox-container() {
    display: flex;
}

@mixin hc-checkbox-content() {
    display: inline-flex;
    cursor: pointer;
}

@mixin hc-checkbox-align-center() {
    align-items: center;
}

@mixin hc-checkbox-align-top() {
    align-items: flex-start;
}

@mixin hc-checkbox-align-bottom() {
    align-items: flex-end;
}

@mixin hc-checkbox-content-label() {
    cursor: pointer;
}

@mixin hc-checkbox-align-label-top() {
    /* important included to override the padding of the tight class if applied */
    padding-top: 0 !important;
    margin-top: -3px;
}

@mixin hc-checkbox-align-label-bottom() {
    /* important included to override the padding of the tight class if applied */
    padding-bottom: 0 !important;
    margin-bottom: -3px;
}

@mixin hc-checkbox-content-disabled() {
    color: $gray-300;
    cursor: not-allowed;
}

@mixin hc-checkbox-content-label-disabled() {
    cursor: not-allowed;
}

@mixin hc-checkbox-label() {
    padding: 4px 0 4px 34px;
    line-height: 1.5;
    margin-left: -22px;
}

@mixin hc-checkbox-label-tight() {
    padding: 2px 0 2px 26px;
    font-size: calculateRem(13px);
    margin-left: -18px;
}

@mixin hc-checkbox-overlay() {
    position: relative;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background-color: $white;
    border: 1px solid $slate-gray-300;
    border-radius: 3px;

    &:after {
        content: '';
        position: absolute;
        background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5BcnRib2FyZCAxPC90aXRsZT48cGF0aCBpZD0iUGF0aF8xMjIyMSIgZGF0YS1uYW1lPSJQYXRoIDEyMjIxIiBjbGFzcz0iY2xzLTEiIGQ9Ik0yOCw5Ljc2YTEuNjYsMS42NiwwLDAsMC0uNDYtMS4xNEwyNS4yMyw2LjM1YTEuNjIsMS42MiwwLDAsMC0yLjI4LDBsLTExLDExTDcuMDUsMTIuNDFhMS42MiwxLjYyLDAsMCwwLTIuMjgsMEwyLjQ5LDE0LjY4QTEuNjcsMS42NywwLDAsMCwyLDE1LjgyLDEuNjYsMS42NiwwLDAsMCwyLjQ5LDE3TDguNTUsMjNsMi4yOCwyLjI4YTEuNjEsMS42MSwwLDAsMCwxLjE0LjQ3LDEuNjMsMS42MywwLDAsMCwxLjE0LS40N0wxNS4zOSwyMywyNy41MSwxMC45QTEuNiwxLjYsMCwwLDAsMjgsOS43NloiLz48L3N2Zz4=');
        margin: auto;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 15.5px;
        height: 15.5px;
        opacity: 0;
    }
}

@mixin hc-checkbox-overlay-tight() {
    width: 18px;
    height: 18px;
    min-width: 18px;

    &:after {
        width: 12.5px;
        height: 12.5px;
    }
}

@mixin hc-checkbox-overlay-disabled() {
    background-color: $gray-200;
    border: 1px solid $gray-300;

    &:focus {
        box-shadow: none;
    }
}

@mixin hc-checkbox-overlay-hover() {
    border: 1px solid $primary-brand;
    background-color: tint($blue, 95%);
}

@mixin hc-checkbox-overlay-focus() {
    outline: none;
    box-shadow: 0 0 5px $primary-brand;
}

@mixin hc-checkbox-overlay-focus-invalid() {
    box-shadow: 0 0 5px $error;
}

@mixin hc-checkbox-overlay-checked() {
    background-color: $primary-brand;
    border: 1px solid $primary-brand;
    &:after {
        opacity: 1;
    }
}

@mixin hc-checkbox-overlay-indeterminate() {
    &:after {
        opacity: 1;
        width: 12px;
        height: 3px;
        background-color: $gray-300;
        background-image: none;
    }
}

@mixin hc-checkbox-overlay-indeterminate-tight() {
    &:after {
        width: 8px;
    }
}

@mixin hc-checkbox-input() {
    display: none;
}

@mixin hc-checkbox-invalid() {
    border-color: $error !important;
}

@mixin hc-checkbox-overlay-checked-invalid() {
    background-color: $error;
}

@mixin hc-checkbox-stubbed() {
    pointer-events: none;
}

@mixin hc-checkbox-children-group() {
    margin-left: 25px;
    margin-top: 5px;
}