@import '~cosmoui/src/components/styles/mixins/flex';

// filter tray
$tray-height: $tray-header-height;
$tray-item-spacing: 14px;
$tray-border-radius: 4px;
$tray-border-radius-left: $tray-border-radius 0 0 $tray-border-radius;
$tray-border-radius-right: 0 $tray-border-radius $tray-border-radius 0;
$tray-item-background-transition: background 0.4s ease;


$tray-item-bg-color: $brand-primary;
$tray-item-bg-hover: $accent_color_hover;
$tray-item-active-bg-color: #0E77A8;
$tray-item-active-bg-hover: #4292B9;

%tray-container {
    @extend %row;
    background: $accent_color;
    border-radius: $tray-border-radius;
    padding: 0;
    margin: 0;
    height: $tray-height;
    width: 100%;
    color: $white;
}

%tray-item {
    @extend %row-center;
    height: $tray-height;
    width: $tray-height;
    background-color: $tray-item-bg-color;
    transition: $tray-item-background-transition;
    &:hover {
        background-color: $tray-item-bg-hover;
    }
}

%tray-dropdown {
    @extend %tray-item;
}