@import "variables";
@import "mixins";
@import "commons";
$header-content-height: 40px;
.overlay {
    height: calc(100%);
    background-color: $column-color;
    position: relative;

    &__header {
        width: calc(100%);
        height: $header-content-height;
        background-color: $column-header-background-color; 
        //border-bottom: 1px solid #222736;
        border-bottom: 1px solid var(--stream-column-border);
        
        display: flex;
    }
    &__content-wrapper  {
        transition: all .2s;
        position: absolute;
        top: $header-content-height;
        right: 0;
        left: 0;
        bottom: 0;
        
        z-index: 1;
        opacity: 0;

        &--selected {
            z-index: 10;
            opacity: 1;
        }
    }    
    &__content {
        display: block;
        width: calc(100%);
        height: calc(100%);
    }
    &__title {
        width: calc(100%);
        height: 30px;
        background-color: $column-header-background-color;
        border-top: 1px solid whitesmoke;
        border-bottom: 1px solid whitesmoke;
        padding: 3px 10px 0 10px;
    }

    &__button {
        // outline: 1px dotted orange;

        width: 25px;
        height: 25px;

        width: $header-content-height;
        height: $header-content-height;

        color: var(--stream-navigation-button);
        transition: all .2s;
        
        &:hover {
            color: var(--stream-navigation-button-hover);
        }
        &--focus {
            color: var(--stream-navigation-button-focus);

            &:hover {
                color: var(--stream-navigation-button-focus-hover);
            }
        }
    }
    &-previous {
        display: block;
        float: left;
        font-size: 18px;

        &__icon {
            position: relative;
            left: 17px;
            top: 7px
        }
    }
    &-refresh {
        display: block;
        float: left;
        font-size: 14px;

        &__icon {
            position: relative;
            left: 13px;
            top: 9px
        }
    }   
    &-next {
        display: block;
        float: left;
        font-size: 18px;

        &__icon {
            position: relative;
            left: 13px;
            top: 7px
        }
    }   
    &-gototop {
        // outline: 1px dotted orange;

        flex-grow: 1;

        display: block;
        height: $header-content-height;
    }
    &-close {
        display: block;
        font-size: 13px;
        color: var(--stream-navigation-close);

        &__icon {
            position: relative;
            left: 15px;
            top: 9px
        }
    }    
}

.not-active {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: gray !important;
}