?///<reference path="../_variables.scss"/>

.sidester {
    position: absolute;
    width: 100%;
    transition: top 0.6s ease;
    padding-top: 4px;
    z-index: 1;
    pointer-events: none;

    @media (max-width: $screen-sm-max) {
        display: none;
    }

    .panel-padder {
        padding-top: 0;
    }

    .is-desktop.has-fullscreen-overlay & {
        width: calc(100% - 17px);
    }
}

.sidester-selectors {
    @extend .list-unstyled;
    pointer-events: all;
    font-size: $sidester-font-size;
    margin-left: 10px;

    li {
        cursor: pointer;
        position: relative;
        line-height: 30px;

        &:first-child {
            margin-top: 0;
        }
    }

    a {
        color: $sidester-color;

        &:hover,
        &:focus {
            text-decoration: none;
        }

        &.active,
        &:hover {
            font-family: $sidester-active-font-family;
            color: $sidester-active-color;
        }
    }
}

.sidester-hook {
    @extend .icon-kiska_topleftplus;
    position: absolute;
    top: 0;

    &:before {
        color: $sidester-active-color;
        position: absolute;
        left: -13px;
        top: -16px;
    }
}

.sidester-hook-point {
    @media (max-width: $screen-sm-max) {
        display: none;
    }

    @extend .icon-kiska_halfplus;

    &:before {
        color: $sidester-active-color;
        position: absolute;
        left: 0;
        top: -12px;
    }
}