// /**
//  * Copyright © 2016 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Components
//  _____________________________________________

@import 'controls/_checkbox-radio.less';

//
//  Basic controls
//  _____________________________________________

//  Common
.__form-control-pattern() {
    -webkit-appearance: none;
    background-color: @field-control__background-color;
    border: @field-control__border-width solid @field-control__border-color;
    border-radius: @field-control__border-radius;
    box-shadow: @field-control__box-shadow;
    color: @field-control__color;
    font-size: @field-control__font-size;
    font-weight: @font-weight__regular;
    height: auto;
    line-height: @field-control__line-height;
    padding: @field-control__padding-top @field-control__padding-horizontal @field-control__padding-bottom;
    transition: @smooth__border-color;
    vertical-align: baseline;
    width: auto;
}

.__form-control-pattern__hover() {
    border-color: @field-control__hover__border-color;
}

.__form-control-pattern__focus() {
    border-color: @field-control__focus__border-color;
    box-shadow: none;
    outline: 0;
}

.__form-control-pattern__disabled() {
    background-color: @field-control__disabled__background-color;
    border-color: @field-control__border-color;
    color: @field-control__color;
    cursor: not-allowed;
    opacity: @disabled__opacity;
}

//  Input text styles
.admin__control-text {
    &:extend(.abs-form-control-pattern all);
    min-width: 4rem;
}

//  Select styles
.admin__control-select {
    &:extend(.abs-form-control-pattern all);
    .lib-css(appearance, none, 1);
    background-image+: url('../images/arrows-bg.svg');
    background-position+: ~'calc(100% - 12px)' -34px;
    background-size+: auto;

    background-image+: linear-gradient(@color-gray89, @color-gray89);
    background-position+: 100%;
    background-size+: @field-control__height 100%;

    background-image+: linear-gradient(@field-control__border-color,@field-control__border-color);
    background-position+: ~'calc(100% - @{field-control__height})' 0;
    background-size+: 1px 100%;

    background-repeat: no-repeat;

    max-width: 100%;
    min-width: 8.5rem;
    padding-bottom: @field-control__padding-bottom - .1rem;
    padding-right: 4.4rem; // Distance between select switch and inner text
    padding-top: @field-control__padding-top - .1rem;
    transition: @smooth__border-color;

    &:hover {
        border-color: @field-control__hover__border-color;
        cursor: pointer;
    }

    &:focus {
        background-image+: url('../images/arrows-bg.svg');
        background-position+: ~'calc(100% - 12px)' 13px;

        background-image+: linear-gradient(@color-gray89, @color-gray89);
        background-position+: 100%;

        background-image+: linear-gradient(@field-control__focus__border-color, @field-control__focus__border-color);
        background-position+: ~'calc(100% - @{field-control__height})' 0;
        border-color: @field-control__focus__border-color;
    }

    &::-ms-expand {
        display: none;
    }

    .ie9 & {
        background-image: none;
        padding-right: @field-control__padding-horizontal;
    }
}

//  ToDo UI: add month and date styles
//  .admin__control-select-month {
//      width: 140px;
//  }

//  .admin__control-select-year {
//      width: 103px;
//  }

//  .admin__control-cvn {
//      width: 3em;
//  }

option:empty {
    display: none;
}

//  Multiple select
.admin__control-multiselect {
    &:extend(.abs-form-control-pattern all);
    height: auto;
    max-width: 100%;
    min-width: @field-size__s;
    overflow: auto;
    padding: 0;
    resize: both;

    option,
    optgroup {
        padding: .5rem 1rem;
    }
}

//  File uploader
.admin__control-file-wrapper {
    display: inline-block;
    padding: .5rem 1rem;
    position: relative;
    z-index: 1;
}

.admin__control-file-label {
    &:before {
        &:extend(.abs-form-control-pattern);

        content:'';
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 0;

        .admin__control-file:active + &,
        .admin__control-file:focus + & {
            &:extend(.abs-form-control-pattern:focus);
        }

        .admin__control-file[disabled] + & {
            &:extend(.abs-form-control-pattern[disabled]);
        }
    }
}

.admin__control-file {
    background: transparent;
    border: 0;
    padding-top: .7rem;
    position: relative;
    width: auto;
    z-index: 1;
}

//
//  Support text. Can be used on label or plain text to align controls & actions
//  ---------------------------------------------

.admin__control-support-text { // ToDo UI: should be renamed to .admin__control-text
    border: @field-control__border-width solid transparent;
    display: inline-block;
    font-size: @field-control__font-size;
    line-height: @field-control__line-height;
    padding-bottom: @field-control__padding-bottom;
    padding-top: @field-control__padding-top;

    + [class*='admin__control-'] {
        margin-left: @action__outer-indent;
    }
}

[class*='admin__control-'] {
    + .admin__control-support-text {
        margin-left: @action__outer-indent;
    }
}

//
//  Service text or control. Can be used to add text or 'Use Default Value' checkbox
//  ---------------------------------------------

.admin__control-service {
    float: left;
    margin: .8rem 0 0 3rem;
}

//
//  Textarea
//  ---------------------------------------------

.admin__control-textarea {
    &:extend(.abs-form-control-pattern all);
    height: 8.48rem;
    line-height: 1.18;
    padding-top: .8rem;
    resize: vertical;
}

//  Control with additional prefix or suffix label
.admin__control-addon {
    .lib-vendor-prefix-display(inline-flex);
    .lib-vendor-prefix-flex-direction(row);
    display: inline-flex;
    flex-flow: row nowrap;
    position: relative;
    width: 100%;
    z-index: 1;

    > [class*='admin__addon-'],
    > [class*='admin__control-'] {
        .lib-vendor-prefix-flex-basis(auto);
        .lib-vendor-prefix-flex-grow(0);
        .lib-vendor-prefix-flex-shrink(0);
        position: relative;
        z-index: 1;
    }

    .admin__control-select {
        width: auto;
    }

    .admin__control-text {
        margin: .1rem;
        padding: @field-control__padding-top - .1rem @field-control__padding-horizontal - .1rem @field-control__padding-bottom - .1rem;
        width: 100%;
    }

    [class*='admin__control-'][class] {
        .lib-css(appearence,none);
        .lib-vendor-prefix-flex-grow(1);
        .lib-vendor-prefix-order(1);
        .lib-vendor-prefix-flex-shrink(1);
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        vertical-align: top;

        & + [class*='admin__control-'] {
            border-left-color: @field-control__border-color;
        }

        :focus {
            box-shadow: 0;
        }

        & ~ [class*='admin__addon-']:last-child {
            padding-left: 1rem;
            position: static !important;
            z-index: 0;

            > * {
                position: relative;
                vertical-align: top;
                z-index: 1;
            }

            &:empty {
                padding: 0;
            }
        }

        & ~ [class*='admin__addon-']:last-child:before {
            &:extend(.abs-form-control-pattern);
            bottom: 0;
            box-sizing: border-box;
            content: '';
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }

        &[disabled] ~ [class*='admin__addon-']:last-child:before {
            &:extend(.abs-form-control-pattern[disabled]);
        }

        &:focus ~ [class*='admin__addon-']:last-child:before {
            &:extend(.abs-form-control-pattern:focus);
        }

        &:hover ~ [class*='admin__addon-']:last-child:before {
            &:extend(.abs-form-control-pattern:hover);
        }
    }
}

.admin__addon-suffix,
.admin__addon-prefix {
    border: 0;
    box-sizing: border-box;
    color: @field-control-addon__color;
    display: inline-block;
    font-size: @field-control__font-size;
    font-weight: @font-weight__regular;
    height: @field-control__height;
    line-height: @field-control__height;
    padding: 0;
}

.admin__addon-suffix {
    .lib-vendor-prefix-order(3);

    &:last-child {
        padding-right: 1rem;
    }
}

.admin__addon-prefix {
    .lib-vendor-prefix-order(0);
}

.ie9 {
    .admin__control-addon {
        &:after {
            clear: both;
            content: '';
            display: block;
            height: 0;
            overflow: hidden;
        }
    }

    .admin__addon {
        min-width: 0;
        overflow: hidden;
        text-align: right;
        white-space: nowrap;
        width: auto;

        [class*='admin__control-'] {
            display: inline;
        }

        &-prefix {
            float: left;
        }

        &-suffix {
            float: right;
        }
    }
}