@import 'custom';
@import 'functions/calculate.rem';
@import 'mixins/image-preview';
@import 'mixins/type-icon';
@import 'mixins/inputs';
@import 'mixins/general';
@import 'mixins/tags';
@import 'mixins/modals';
@import 'mixins/togglers';
@import 'mixins/pagination';

@mixin checkbox-icon($color: $ibexa-color-primary) {
    border: calculateRem(1px) solid $color;
    margin: 0;
    padding: 0;
    width: calculateRem(64px);
    height: calculateRem(32px);
    border-radius: $ibexa-border-radius;
    position: relative;
    z-index: 0;
    cursor: pointer;

    &:before {
        content: '';
        position: absolute;
        width: calculateRem(32px);
        height: calculateRem(32px);
        top: 50%;
        left: 0;
        background-color: $color;
        z-index: -1;
        border-radius: $ibexa-border-radius;
        transform: translate(100%, -50%);
        transition: all 0.2s $ibexa-admin-transition;
    }

    .ez-icon {
        fill: $color;
        height: calculateRem(20px);
        width: calculateRem(20px);
        margin: calculateRem(1px) calculateRem(4px) auto;

        &:first-child {
            margin-left: calculateRem(5px);
        }
    }

    .ez-icon + .ez-icon {
        fill: $ibexa-white;
    }

    &.is-checked {
        &:before {
            transform: translate(0, -50%);
        }

        .ez-icon {
            fill: $ibexa-white;
        }

        .ez-icon + .ez-icon {
            fill: $color;
        }
    }

    &.disabled {
        cursor: inherit;
        opacity: 0.5;
    }

    .ez-checkbox-icon__checkbox {
        display: none;
    }
}

@mixin checkbox-switcher($size: 2.5rem) {
    $labelHeight: calc(#{$size} - #{calculateRem(16px)});
    $indicatorOffsetLeft: calc(#{$size} / 10);
    $indicatorOffsetRight: calc(calc(#{$size} / 2) - #{$indicatorOffsetLeft});

    .ez-data-source__label {
        position: relative;
        width: $size;
        height: $labelHeight;
        background-color: transparent;
        border-radius: calculateRem(24px);
        cursor: pointer;
        border: calculateRem(1px) solid $ibexa-color-base-dark;

        input {
            opacity: 0;
            height: 1px;
        }

        .ez-data-source__indicator {
            width: calc(#{$size} - #{calculateRem(24px)});
            height: calc(#{$size} - #{calculateRem(24px)});
            display: block;
            background-color: $ibexa-color-base-dark;
            border-radius: 50%;
            position: absolute;
            top: calculateRem(3px);
            left: 0;
            transition: all 0.3s $ibexa-admin-transition;
            transform: translateX($indicatorOffsetLeft);
            cursor: pointer;
            z-index: 1;
        }

        &.is-checked {
            background-color: transparent;
            border: calculateRem(1px) solid $ibexa-color-primary;

            .ez-data-source__indicator {
                transform: translateX($indicatorOffsetRight);
                background-color: $ibexa-color-primary;
            }
        }

        &.is-disabled {
            opacity: 0.5;
        }
    }
}

@mixin datetime-field() {
    .ez-data-source__input-wrapper {
        max-width: 30ch;
        position: relative;
    }

    .ez-data-source__btn--clear-input {
        position: absolute;
        top: 50%;
        right: calculateRem(4px);
        transform: translate(0, -50%);
        background: none;
        border: 0;
        width: calculateRem(24px);
        height: calculateRem(24px);
        line-height: calculateRem(8px);
        text-align: center;
        padding: 0;
        margin: 0;
        cursor: pointer;
        outline: none;

        .ez-icon {
            fill: $ibexa-color-base-dark;
            transition: fill 0.3s $ibexa-admin-transition;
        }

        &:hover,
        &:focus {
            .ez-icon {
                fill: $ibexa-color-base-deep;
            }
        }
    }

    .flatpickr-input {
        &.is-invalid.form-control[readonly] {
            @include input-invalid();
        }
    }
}

@mixin label-required() {
    &:after {
        content: ': ';
    }

    &.required {
        &:after {
            content: '*: ';
        }
    }
}

@mixin btn-preview-action {
    padding: 0;
    border: 0 none;
    border-radius: 50%;
    height: calculateRem(40px);
    width: calculateRem(40px);
    line-height: calculateRem(40px);
    cursor: pointer;
    transition: background 0.3s $ibexa-admin-transition;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .ez-icon {
        height: calculateRem(24px);
        width: calculateRem(24px);
    }
}

@mixin map-input-invalid() {
    &.is-invalid {
        .ez-data-source__label {
            color: $ibexa-color-danger;
        }

        .ez-data-source__input {
            border: calculateRem(1px) solid $ibexa-color-danger;
            background: $ibexa-color-warning-pale;
        }
    }
}

@mixin exclamation-mark-error {
    position: relative;

    &:before {
        content: '!';
        position: absolute;
        top: calculateRem(10px);
        left: calculateRem(-10px);
        color: $ibexa-color-danger;
        text-align: center;
        font-size: calculateRem(24px);
        width: calculateRem(20px);
        height: calculateRem(36px);
    }
}

@mixin nav-item-active-hover {
    background-color: $ibexa-white;
    border-top-color: $ibexa-white;
    border-right-color: $ibexa-white;
    border-bottom-color: $ibexa-color-primary;
    border-left-color: $ibexa-white;
}
