@import "~cosmoUiVariables";
@import "~cosmoui/src/components/styles/mixins/paddings";
@import "~cosmoui/src/components/styles/mixins/margins";
@import "~cosmoui/src/components/styles/mixins/flex";

$nav-height: 40px;
$nav-container-padding: 15px;
$nav-title-font-size: 14px;
$nav-divider: $card_inner_border;

// LINK
$nav-item-font-size: 12px;
$nav-item-padding-x: 20px;
$nav-item-padding-y: 3px;
$nav-item-border: 2px solid transparent;
$nav-item-active-border: 2px solid $brand-primary;
$nav-item-active-font-weight: bold;


// AVATAR
$nav-avatar-size: 32px;
$nav-avatar-border-radius: 100%;

.container {
    margin-bottom: $nav-container-padding;
    flex-basis: $nav-height;
    flex-shrink: 0;
}

.pageLabel {
    font-size: $nav-item-font-size;
    text-decoration: none;
    min-width: 75px;
    text-transform: uppercase;
}

.item {
    @include margin-x($nav-item-padding-x);
    @include padding-y($nav-item-padding-y);
    line-height: normal;
    font-size: $nav-item-font-size;
    text-decoration: none;
    border-top: $nav-item-border;
    border-bottom: $nav-item-border;
}

.itemDivider {
    @extend %row;
    height: 100%;
    @include padding-x($nav-item-padding-x);
    font-size: $nav-title-font-size;
    border-right: $nav-divider;
}


.active {
    border-bottom: $nav-item-active-border;
    font-weight: $nav-item-active-font-weight;
}

.right {
    height: $nav-height;
    margin-left: auto;
}

.avatar {
    margin-left: $nav-item-padding-x;
    height: $nav-avatar-size;
    width: $nav-avatar-size;
    border-radius: $nav-avatar-border-radius;
}

.appSelect {
    button {
        > span {
            color: $text-global;
            font-size: 14px;
        }
    }
}

.navAction {
    @extend %row-center;
    margin: 0;
    padding: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: $border-radius-sm;
    cursor: pointer;

    &.hover {
        box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.1);
    }

    &.disabled {
        cursor: default;
    }
}