@use "variables" as *;
@import "mixins";

$nav-size: 80px;

:host {
    background-color: $color-palette-gray-200;
    border-left: solid 1px $color-palette-gray-300;
    display: flex;
    flex-shrink: 0;
    order: 2;
    width: $nav-size;
    transition: background-color $basic-speed ease-in;

    &.portlet-content,
    &.portlet-layout,
    &.portlet-rules,
    &.portlet-experiments {
        top: $toolbar-height + $dot-secondary-toolbar-main-height;
    }

    &.edit-page-variant-mode {
        background-color: $color-palette-primary-200;

        a:hover {
            background-color: $color-palette-primary-100;
        }
    }
}

.edit-page-nav {
    @include naked-list;
    width: 100%;
}

.edit-page-nav__item {
    align-items: center;
    color: $color-palette-gray-800;
    display: flex;
    flex-direction: column;
    font-size: $font-size-xs;
    height: $nav-size;
    justify-content: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color $basic-speed ease-in;

    dot-icon {
        margin-bottom: $spacing-1;
    }

    &:hover {
        background-color: $color-palette-gray-200;
    }

    & > .fa {
        font-size: $font-size-sm;
        margin-bottom: 8px;
    }

    &--disabled,
    &--disabled:hover {
        background-color: transparent;
        opacity: 0.4;
        cursor: not-allowed;
    }
}

.edit-page-nav__item--active {
    background-color: $white;
    color: $black;
    pointer-events: none;
    border-bottom: 1px solid $color-palette-gray-300;
    border-top: 1px solid transparent;
}

.edit-page-nav li:not(:first-child) .edit-page-nav__item--active {
    border-color: $color-palette-gray-300;
}
