@import './colors';
@import './mixins';

$hc-pick-highlight:$azure !default;
$hc-pick-primary-text: $offblack !default;
$hc-pick-border: $gray-300 !default;
$hc-pick-border-radius: 4px !default;
$hc-pick-bg: $white !default;
$hc-pick-selected: $hc-pick-highlight !default;
$hc-pick-hover: tint($blue, 75%) !default;
$hc-pick-height: 36px !default;

$folder-icon: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2048 1792' style='enable-background:new 0 0 2048 1792;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2300AEFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M1600,1312V608c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H800c-26.7,0-49.3-9.3-68-28s-28-41.3-28-68v-64 c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H288c-26.7,0-49.3,9.3-68,28s-28,41.3-28,68v960c0,26.7,9.3,49.3,28,68s41.3,28,68,28h1216 c26.7,0,49.3-9.3,68-28S1600,1338.7,1600,1312z M1728,608v704c0,61.3-22,114-66,158s-96.7,66-158,66H288c-61.3,0-114-22-158-66 s-66-96.7-66-158V352c0-61.3,22-114,66-158s96.7-66,158-66h320c61.3,0,114,22,158,66s66,96.7,66,158v32h672c61.3,0,114,22,158,66 S1728,546.7,1728,608z'/%3E%3C/svg%3E%0A";
$folder-icon-open: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2048 1792' style='enable-background:new 0 0 2048 1792;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2300AEFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M1845,931c0-23.3-17.7-35-53-35H704c-26.7,0-55.2,7.2-85.5,21.5S564.3,949.3,547,970l-294,363 c-12,16-18,29.3-18,40c0,23.3,17.7,35,53,35h1088c26.7,0,55.3-7.3,86-22s54.3-32.3,71-53l294-363C1839,955.3,1845,942.3,1845,931z M704,768h768V608c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H800c-26.7,0-49.3-9.3-68-28s-28-41.3-28-68v-64c0-26.7-9.3-49.3-28-68 s-41.3-28-68-28H288c-26.7,0-49.3,9.3-68,28s-28,41.3-28,68v853l256-315c29.3-35.3,68-64.5,116-87.5S658.7,768,704,768z M1973,931 c0,41.3-15.3,81.3-46,120l-295,363c-28.7,35.3-67.3,64.5-116,87.5s-95.3,34.5-140,34.5H288c-61.3,0-114-22-158-66s-66-96.7-66-158 V352c0-61.3,22-114,66-158s96.7-66,158-66h320c61.3,0,114,22,158,66s66,96.7,66,158v32h544c61.3,0,114,22,158,66s66,96.7,66,158v160 h192c36,0,69,8.2,99,24.5s52.3,39.8,67,70.5C1968,884.3,1973,907,1973,931z'/%3E%3C/svg%3E";
$folder-icon-white: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2048 1792' style='enable-background:new 0 0 2048 1792;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M1600,1312V608c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H800c-26.7,0-49.3-9.3-68-28s-28-41.3-28-68v-64 c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H288c-26.7,0-49.3,9.3-68,28s-28,41.3-28,68v960c0,26.7,9.3,49.3,28,68s41.3,28,68,28h1216 c26.7,0,49.3-9.3,68-28S1600,1338.7,1600,1312z M1728,608v704c0,61.3-22,114-66,158s-96.7,66-158,66H288c-61.3,0-114-22-158-66 s-66-96.7-66-158V352c0-61.3,22-114,66-158s96.7-66,158-66h320c61.3,0,114,22,158,66s66,96.7,66,158v32h672c61.3,0,114,22,158,66 S1728,546.7,1728,608z'/%3E%3C/svg%3E%0A";
$folder-icon-open-white: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 2048 1792' style='enable-background:new 0 0 2048 1792;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M1845,931c0-23.3-17.7-35-53-35H704c-26.7,0-55.2,7.2-85.5,21.5S564.3,949.3,547,970l-294,363 c-12,16-18,29.3-18,40c0,23.3,17.7,35,53,35h1088c26.7,0,55.3-7.3,86-22s54.3-32.3,71-53l294-363C1839,955.3,1845,942.3,1845,931z M704,768h768V608c0-26.7-9.3-49.3-28-68s-41.3-28-68-28H800c-26.7,0-49.3-9.3-68-28s-28-41.3-28-68v-64c0-26.7-9.3-49.3-28-68 s-41.3-28-68-28H288c-26.7,0-49.3,9.3-68,28s-28,41.3-28,68v853l256-315c29.3-35.3,68-64.5,116-87.5S658.7,768,704,768z M1973,931 c0,41.3-15.3,81.3-46,120l-295,363c-28.7,35.3-67.3,64.5-116,87.5s-95.3,34.5-140,34.5H288c-61.3,0-114-22-158-66s-66-96.7-66-158 V352c0-61.3,22-114,66-158s96.7-66,158-66h320c61.3,0,114,22,158,66s66,96.7,66,158v32h544c61.3,0,114,22,158,66s66,96.7,66,158v160 h192c36,0,69,8.2,99,24.5s52.3,39.8,67,70.5C1968,884.3,1973,907,1973,931z'/%3E%3C/svg%3E";
$pick-left-arrow: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448 512' style='enable-background:new 0 0 448 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M257.5,445.1l-22.2,22.2c-9.4,9.4-24.6,9.4-33.9,0L7,273c-9.4-9.4-9.4-24.6,0-33.9L201.4,44.7 c9.4-9.4,24.6-9.4,33.9,0l22.2,22.2c9.5,9.5,9.3,25-0.4,34.3L136.6,216H424c13.3,0,24,10.7,24,24v32c0,13.3-10.7,24-24,24H136.6 l120.5,114.8C267,420.1,267.1,435.6,257.5,445.1z'/%3E%3C/svg%3E";
$pick-right-arrow: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448 512' style='enable-background:new 0 0 448 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M190.5,66.9l22.2-22.2c9.4-9.4,24.6-9.4,33.9,0L441,239c9.4,9.4,9.4,24.6,0,33.9L246.6,467.3 c-9.4,9.4-24.6,9.4-33.9,0l-22.2-22.2c-9.5-9.5-9.3-25,0.4-34.3L311.4,296H24c-13.3,0-24-10.7-24-24v-32c0-13.3,10.7-24,24-24h287.4 L190.9,101.2C181.1,91.9,180.9,76.4,190.5,66.9z'/%3E%3C/svg%3E";
$pick-search: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23A1A1A1;%7D%0A%3C/style%3E%3Cpath class='st0' d='M505,442.7l-60.2-60.2L405.3,343l-22.4-22.4C403.9,288.2,416,249.5,416,208C416,93.1,322.9,0,208,0 S0,93.1,0,208s93.1,208,208,208c41.5,0,80.2-12.1,112.6-33.1l21.9,21.9c0.2,0.2,0.3,0.3,0.5,0.5l99.7,99.7c9.4,9.4,24.6,9.4,33.9,0 l28.3-28.3C514.3,467.3,514.3,452.1,505,442.7z M208,336c-70.7,0-128-57.2-128-128c0-70.7,57.2-128,128-128c70.7,0,128,57.2,128,128 C336,278.7,278.8,336,208,336z'/%3E%3C/svg%3E";
$pick-search-clear: "%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23A1A1A1;%7D%0A%3C/style%3E%3Cpath class='st0' d='M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M377.6,321.1c4.7,4.7,4.7,12.3,0,17 L338,377.6c-4.7,4.7-12.3,4.7-17,0L256,312l-65.1,65.6c-4.7,4.7-12.3,4.7-17,0L134.4,338c-4.7-4.7-4.7-12.3,0-17l65.6-65l-65.6-65.1 c-4.7-4.7-4.7-12.3,0-17l39.6-39.6c4.7-4.7,12.3-4.7,17,0l65,65.7l65.1-65.6c4.7-4.7,12.3-4.7,17,0l39.6,39.6c4.7,4.7,4.7,12.3,0,17 L312,256L377.6,321.1z'/%3E%3C/svg%3E";

@mixin hc-picklist() {
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
}


@mixin hc-picklist-pane-container() {
    width: 45%;
    display: flex;
    flex-direction: column;
}

@mixin hc-picklist-pane-header() {
    flex: 0 0 auto;
}

@mixin hc-picklist-pane-header-default() {
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

@mixin hc-picklist-max-limit-msg() {
    @include fontSize(12px);
    font-weight: 400;
    font-style: italic;
    text-align: right;
}

@mixin hc-picklist-max-limit-exceeded() {
    color: $deep-red;
}

@mixin hc-pick-pane-container() {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@mixin hc-picklist-pane-tools() {
    display: flex;
    justify-content: space-between;
    margin: 12px 0 4px;
    flex: 0 0 auto;
    @include fontSize(12px);
}

@mixin hc-pick-button-link-inline() {
    margin-left: 10px;
    font-weight: 400;

    &[disabled] {
        color: $gray-600;
    }
}

@mixin hc-picklist-move-btns() {
    padding-top: 100px;
    display: flex;
    flex-flow: column;
    justify-content: center;

    // prevents a slight jiggle when animating nearby elements
    transform-style: preserve-3d;
    transform: translate3d(0,0,0);
}

@mixin hc-picklist-move-btn() {
    min-width: 35px;
    width: 35px;
    padding: 0;
    height: 60px;
    margin-bottom: 12px;

    &[disabled], &[disabled]:hover {
        background-color: $gray-300;
    }
}

@mixin hc-picklist-arrow() {
    display: inline-block;
    width: 14px;
    height: 16px;
    background-repeat: no-repeat;
}

@mixin hc-picklist-left-arrow() {
    background-image: url("data:image/svg+xml, #{$pick-left-arrow}");
}

@mixin hc-picklist-right-arrow() {
    background-image: url("data:image/svg+xml, #{$pick-right-arrow}");
}


@mixin hc-pick-pane() {
    position: relative;
}

@mixin hc-pick-search-outer() {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    cursor: default;
    outline: none;

    .hc-form-field-wrapper {
        padding-bottom: 0;
    }
}

@mixin hc-pick-input-search-suffix() {
    display: inline-block;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    top: 1px;
    position: relative;
}

@mixin hc-pick-input-search() {
    background-image: url("data:image/svg+xml, #{$pick-search}");
}

@mixin hc-pick-input-search-clear() {
    background-image: url("data:image/svg+xml, #{$pick-search-clear}");
    opacity: 0.5;
    margin-right: 10px;
    cursor: pointer;
    &:hover { opacity: 0.85; }
    &:active { opacity: 1; }
}

@mixin hc-form-field-suffix() {
    padding-right: 10px;
}

@mixin hc-pick-pane-search-no-toolbar() {
    margin-bottom: 10px;
}

@mixin hc-pick-pane-list() {
    background-color: $hc-pick-bg;
    border: 1px solid $slate-gray-300;
    box-sizing: border-box;
    width: 100%;
    -webkit-overflow-scrolling: touch;

    &:focus {
        outline: none;
    }
}

@mixin hc-pane-will-accept-drop() {
    border-color: $blue;
    box-shadow: 0 0 3px $blue;
}

@mixin hc-pane-is-active-option-marked() {
    outline: lighten($blue, 15) 1px dotted; outline-offset: -2px;
}

@mixin hc-pick-pane-list-scroll-host() {
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    display: block;
    -webkit-overflow-scrolling: touch;
}
@mixin hc-pick-pane-list-scrollable-content() {
    width: 100%;
    min-height: 100%;
    height: 100%;
}
@mixin hc-pick-pane-list-scrollable-content-virtual() {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
@mixin hc-pick-pane-list-total-padding() {
    width: 1px;
    opacity: 0;
}

@mixin hc-pick-pane-list-items() {
    flex: 1 1 auto;
    display: block;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
}

@mixin hc-pick-pane-list-footer() {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    flex: 0 0 auto;
    @include fontSize(12px);
}

@mixin hc-pick-option-row() {
    padding: 8px 10px;
    color: $hc-pick-primary-text;
    box-sizing: border-box;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

@mixin hc-pick-option-selected() {
    background-color: $hc-pick-selected;
    color: $white;
}
@mixin hc-pick-option-hover() {
    background-color: $hc-pick-hover;
    color: $hc-pick-primary-text;
}
@mixin hc-pick-option-selected-hover() {
    background-color: lighten($hc-pick-selected, 5);
    color: $white;
}
@mixin hc-pick-option-disabled() {
    cursor: default;
}

@mixin hc-pick-custom-option-marked() {
    background-color: $hc-pick-hover;
    color: $hc-pick-primary-text;
}

@mixin hc-pick-option-hide() {
    display: none;
}


@mixin hc-pick-group-icon() {
    display: inline-block;
    background-repeat: no-repeat;
    background-position-x: 7px;
    height: 14px;
    width: 28px;
    cursor: pointer;
    background-image: url("data:image/svg+xml, #{$folder-icon}");

    &:before {
        content: "";
        position: relative;
        top: -1px;
        width: 0;
        height: 0;
        display: inline-block;
        border: 4px solid transparent;
        border-left-color: $blue;
        transition: transform 0.2s, top 0.2s, left 0.2s;
    }
}

@mixin hc-pick-group-icon-open() {
    background-image: url("data:image/svg+xml, #{$folder-icon-open}");
    &:before { transform: rotate(90deg); top: 0px; left: -2px; }
}


@mixin hc-pick-group-icon-selected() {
    background-image: url("data:image/svg+xml, #{$folder-icon-white}");

    &:before {
        border-left-color: $white;
    }
}

@mixin hc-pick-group-icon-selected-open() {
    background-image: url("data:image/svg+xml, #{$folder-icon-open-white}");
}

@mixin hc-pick-optgroup() {
    background-color:shade($slate-gray-100, 5%);
    user-select: none;
    font-weight: 500;
    @include fontSize(13px);
}

@mixin hc-pick-option() {
    background-color: $hc-pick-bg;
}

@mixin hc-pick-option-disabled() {
    color: lighten($hc-pick-primary-text, 60);
}

@mixin hc-pick-option-child() {
    padding-left: 22px;
}

@mixin hc-pick-custom-item-label() {
    font-size: 80%;
    font-weight: 400;
    padding-right: 5px;
}

@mixin hc-pick-empty-msg() {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
    color: $gray-400
}