@import "variables";
@import "colors";

$separator-height: 15px;
$separator-width: 1px;
$separator-item-offset: 8px;

@mixin transition {
    transition: $default_transition_on;

    &:hover {
        transition: $default_transition_off;
    }
}

@mixin main-wrapper {
    margin: 0 auto;
    max-width: $root_max_width;
    min-width: $root_min_width;
    padding: 0 $offset_main * 4;
    width: 100%;

    @media all and (max-width: $media_breakpoint_m) {
        padding-left: $offset_main * 2.5;
        padding-right: $offset_main * 2.5;
    }
}

@mixin separated-item($type: "main", $fullheight: "false") {
    display: inline-block;
    padding-right: $separator-item-offset;
    position: relative;

    & + & {
        padding-left: $separator-item-offset;

        &::before {
            background: $separator;
            content: "";
            height: $separator-height;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: $separator-width;
        }
    }

    @if $fullheight == true {
        & + &::before {
            height: 100%;
        }
    }

    @if $type == secondary {
        & + &::before {
            background: $separator_secondary;
        }
    }

    &:last-child {
        padding-right: 0;
    }
}

@mixin control {
    @include transition;

    border-radius: $border_radius_main;
    display: inline-block;
    font-family: Rubik, helvetica, arial, sans-serif;
    height: $control_height_normal;
    line-height: normal;
    padding-left: $control_side_padding_normal;
    padding-right: $control_side_padding_normal;

    &-size-small {
        height: $control_height_small;
        padding-left: $offset_main;
        padding-right: $offset_main;
    }

    &-size-large {
        height: $control_height_large;
        padding-left: $offset_main * 2;
        padding-right: $offset_main * 2;
    }

    /* stylelint-disable no-descending-specificity */

    .ControlsGroup-item + .ControlsGroup-item & {
        border-left: 0 none;
        border-radius: 0;
    }

    .ControlsGroup-item + .ControlsGroup-item:last-child & {
        border-radius: 0 $border_radius_main $border_radius_main 0;
    }

    .ControlsGroup-item:first-child:not(:only-child) & {
        border-radius: $border_radius_main 0 0 $border_radius_main;
    }

    .ControlsGroup-type-input & {
        border-color: $color_control_border_input;
    }

    .Form-item-error .ControlsGroup-item & {
        border-color: $color_danger;
    }

    /* stylelint-enable no-descending-specificity */
}

@mixin action-control {
    font-size: $_font_size_label_default;
    font-weight: $weight_bold;
    text-transform: uppercase;

    &-size-small {
        font-size: $_font_size_label_small;
    }

    &-size-large {
        font-size: $_font_size_label_medium;
    }
}

@mixin control-default-active {
    background-color: $color_control_background_auxilliary;
    background-image: none;
    border-color: $color_control_border_auxilliary;
    box-shadow: $control_box-shadow_active;
    color: $color_dark_text_auxilliary;
}

@mixin control-default {

    background-color: $color_control_background_main;
    background-image: linear-gradient(to bottom, rgba($color_control_background_main, .5), $mouse);
    border: $border_control_default;
    box-shadow: $control_box-shadow_default;

    &,
    &:visited {
        color: $color_dark_text;
    }

    &:hover,
    &:focus,
    &-focused {
        background-image: linear-gradient(to bottom, rgba($color_control_background_main, .5), $mouse_bright);
        border-color: $color_control_border_auxilliary;
        box-shadow: $control_box-shadow_hover;
        color: $color_dark_text_auxilliary;
        outline: none;
    }

    &:active,
    &-active {
        @include control-default-active;
    }

    &::-moz-focus-inner {
        border: 0;
    }

    .ControlsGroup-type-input & {
        border-color: $color_control_border_input;
    }

    .Form-item-error & {
        border-color: $color_danger;
    }
}

@mixin control-default-disabled {
    background: $color_control_background_auxilliary;
    border-color: $color_control_border_unactive;
    box-shadow: none;
    cursor: default;
    pointer-events: none;

    &,
    &:visited,
    &:link {
        color: $color_text_label;
    }
}

@mixin control-primary-active {
    background: $color_action_secondary;
    box-shadow: $control_box-shadow_primary_active;

    &,
    &:visited,
    &:link {
        color: rgba($color_text_invert, .5);
    }
}

@mixin control-primary-disabled {

    &,
    &:visited {
        color: rgba($color_text_invert, .5);
    }
}

@mixin control-primary {
    background: $color_action_main;
    border: none;
    box-shadow: $control_box-shadow_default;

    &,
    &:visited,
    &:link {
        color: $color_text_invert;
    }

    &:hover {
        background: $color_action_secondary;
        box-shadow: $control_box-shadow_hover;
    }

    &:active,
    &-active {
        @include control-primary-active;
    }
}

@mixin label($size: "default") {
    color: $color_text_label;
    font-size: $_font_size_label_default;
    text-transform: uppercase;

    @if $size == small {
        font-size: $_font_size_label_small;
    }

    @if $size == large {
        font-size: $_font_size_label_medium;
        font-weight: $weight_bold;
    }

    &-required::after {
        content: "*";
        display: inline-block;
        margin-left: $offset_main * .5;
    }
}

@mixin helpText {
    color: $color_text_label;
    font-size: $font_size_default;
    font-style: italic;
}

@mixin base-container($type: "default") {
    background: $color_panel_background;
    border: $border_main;
    padding-left: $offset_main * 3;
    padding-right: $offset_main * 3;
    position: relative;

    @if $type == main {
        padding-bottom: $offset_main * 3;
        padding-top: $offset_main * 3;
    }

    & + & {
        margin-top: $offset_main;
    }
}

@mixin inline-middle {
    position: relative;

    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        position: relative;
        vertical-align: middle;
    }

    & > * {
        display: inline-block;
        vertical-align: middle;
    }

    & > script {
        display: none;
    }
}

@mixin panel {
    background: $color_panel_background;
    border: 1px solid $color_control_border_input_auxilliary;
    border-radius: $border_radius_main;
    box-shadow: $panel_box_shadow;
}

@mixin input-control {
    $parent: &;

    @include transition;

    align-items: flex-start;
    color: $color_dark_text_auxilliary;
    display: flex;
    position: relative;
    user-select: none;

    &-input {
        margin: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
    }

    #{$parent} &-icon {
        @include transition;

        fill: $color_action_main;
        left: 50%;
        margin-top: -2px;
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
    }

    &-faker,
    &-caption {
        display: inline-block;
        vertical-align: middle;
    }

    &-caption {
        margin-left: 8px;
        position: relative;
    }

    &-faker {
        @include transition;

        background: $color_panel_background;
        border: 1px solid $color_control_border_input;
        border-radius: $border_radius_secondary;
        display: inline-block;
        height: $control_form_size;
        position: relative;
        width: $control_form_size;
        flex-shrink: 0;

        #{$parent}:hover & {
            border-color: $color_control_border_input_auxilliary;

        }

        #{$parent}:hover #{$parent}-input:checked + & {
            border-color: $color_action_secondary;
            color: $color_action_secondary;
        }

        #{$parent}-input:checked + & {
            border-color: $color_action_main;
            color: $color_action_main;
        }

        #{$parent}-input:checked + & {
            #{$parent}-icon {
                margin-top: 0;
                opacity: 1;
                visibility: visible;
            }
        }

        #{$parent}-input:disabled + &,
        #{$parent}-input:hover:disabled + &,
        #{$parent}-input:focus:disabled + &,
        #{$parent}-input:active:disabled + & {
            background: $color_control_background_auxilliary;
            border-color: $color_control_border_main;
            color: $color_control_border_main;

            #{$parent}-icon {
                fill: $color_control_border_main;
            }

            &::after {
                background: $color_control_border_main;
            }
        }

    }
}

@mixin popover-panel {
    background: $color_control_background_main;
    border: 1px solid $color_control_border_auxilliary;
    border-radius: $border_radius_main;
    box-shadow: $panel_box_shadow;
}

@mixin dropdown-menu {
    @include popover-panel;

    padding: $offset_main;
    position: absolute;
    text-align: left;
}

@mixin dropdown-item-hover {
    background: $color_control_background_auxilliary;
    color: $color_dark_text_auxilliary;
}

/* stylelint-disable max-nesting-depth */
@mixin dropdown-item {
    $parent: &;

    color: $color_dark_text;
    font-size: $_font_size_label_medium;
    line-height: $line_height_default;
    padding: ($offset_main * .8) $offset_main;
    text-align: left;
    white-space: nowrap;

    & + & {
        border-top: $border_secondary;

        &-separated {
            border-top: $border_main;
        }
    }

    &:hover,
    &-focused {
        @include dropdown-item-hover;
    }

    &-active {
        &,
        &:hover {
            background-color: $color_action_auxilliary;
            color: $color_dark_text_auxilliary;
        }
    }

    &-disabled {
        &,
        &:hover,
        &#{$parent}-focused {
            color: $color_text_label;
            cursor: default;
            pointer-events: none;
            background: none;
        }

    }

}
/* stylelint-enable max-nesting-depth */

@mixin button-direction-control {
    font-size: $font_size_small;
    font-weight: $weight_bold;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    user-select: none;
    width: $control_width;

    .Button-icon-wrapper {
        margin: 0;
    }
}

@mixin column {
    display: table-cell;
    vertical-align: top;

    & + & {
        padding-left: $offset_main * 3;
    }
}

@mixin columnWidth($cols) {
    width: $cols / $grid_columns * 100%;
}

@mixin page-section {
    & + & {
        margin-top: $offset_main * 3;
    }
}