@import "../variables";
@import "~cosmoUiVariables";
@import '../mixins/common';
@import '../mixins/flex';

//tray item size
$tray-height: $tray-header-height !default;
$tray-item-spacing: 14px !default;


// tray item colors
$tray-item-fg: $white !default;
$tray-item-fg-inactive:  rgba(255, 255, 255, 0.4) !default;
$tray-item-background-transition: background 0.4s ease !default;
$tray-item-bg-color: $accent_color !default;
$tray-item-bg-hover: $accent_color_hover !default;
$tray-item-primary-bg-color: #09567a !default;
$tray-item-primary-bg-hover: lighten($tray-item-primary-bg-color, 5%) !default;
$tray-item-secondary-bg-color: #46AADB !default;
$tray-item-secondary-bg-hover: #6BBAE2 !default;
$tray-item-active-bg-color: #0E77A8 !default;
$tray-item-active-bg-hover: lighten($tray-item-active-bg-color, 5%) !default;

// tray item input
$tray-item-input-border-color: transparent !default;
$tray-item-input-border-left-color: $tray-item-input-border-color !default;
$tray-item-input-border-top-color: $tray-item-input-border-color !default;
$tray-item-input-border-right-color: $tray-item-input-border-color !default;
$tray-item-input-border-bottom-color: $white !default;
$tray-item-input-placeholder-color: rgba(255, 255, 255, 0.7) !default;

// tray item selected
$tray-item-selected-border-color: #ffb104 !default;
$tray-item-selected-border-width: 3px !default;

%item-base {
    @extend %control;
    height: $tray-height;
    width: $tray-height;
    min-width: $tray-height;
    background-color: $tray-item-bg-color;
    transition: $tray-item-background-transition;
    text-overflow: ellipsis;
    cursor: default;

    a {
        color: $tray-item-fg;
    }
}

.item {
    @extend %item-base;
}

.onClick {
    cursor: pointer;

    &:hover {
        background-color: $tray-item-bg-hover;
    }
}

.disabled {
    a {
        color: $tray-item-fg-inactive;
    }
    use {
        fill: $tray-item-fg-inactive;
    }
}

.primary {
    background-color: $tray-item-primary-bg-color;
    &:hover {
        background-color: $tray-item-primary-bg-hover;
    }
}

.secondary {
    background-color:  $tray-item-secondary-bg-color;
    &:hover {
        background-color: $tray-item-secondary-bg-hover;
    }
}

.active {
    background-color:  $tray-item-active-bg-color;
    &:hover {
        background-color: $tray-item-active-bg-hover;
    }
}

.stroke {
    use {
        fill: transparent;
        stroke: $tray-item-fg;
    }
}

.disabledStroke {
    use {
        fill: transparent;
        stroke: $tray-item-fg-inactive;
    }
}

.dropdown {
    @extend %item-base;
}

.input {
    border-width: 1px;
    border-style: solid;
    border-left-color: $tray-item-input-border-left-color;
    border-top-color: $tray-item-input-border-top-color;
    border-right-color: $tray-item-input-border-right-color;
    border-bottom-color: $tray-item-input-border-bottom-color;
    margin-right: 14px;
    width: auto;
    height: auto;

    &:hover {
        background-color: $tray-item-bg-color;
    }

    input, textarea {
        @extend %control;
        padding: 0 0 0 6px;
        height: 23px;
        width: 125px;
        background: transparent;
        border: none;
        color: $tray-item-fg;
        &::placeholder {
            color: $tray-item-input-placeholder-color;
            font-style: italic;
        }
    }
}

.dynamic {
    width: auto;
    padding: 0 8px;
}

.selected {
    height: $tray-height;
    border-bottom: $tray-item-selected-border-width solid $tray-item-selected-border-color;
    border-top: $tray-item-selected-border-width solid transparent;
    box-sizing: border-box;
}

.overflowButton {
    position: relative;
    //letter-spacing: 2px;
}

.overflowContainer {
    position: absolute;
    @extend %row-center;
    flex-wrap: wrap;
    top: ($tray-height);
    z-index: 1000;
}

.overflowRight {
    right: -($tray-height);
    align-items: flex-end;
}

.overflowLeft {
    left: 0;
    align-items: flex-start;
}

.overflowCenter {
    align-items: center;
}