@import './variables';
@import '../../../styles/sizes.media';

.left-sidebar-removeable-link-container {
    position: relative;
    display: flex;

    &:active,
    &:focus,
    &:hover {
        color: $bdl-gray;
        text-decoration: none;
        background-color: $lsb-menu-hover-link-bg;

        .left-sidebar-link:not(.is-selected) {
            color: $bdl-gray;
        }

        .lsb-remove-button {
            padding: 0 8px 0 7px;
            opacity: 1;

            .lsb-remove-button-icon {
                transform: scale(1, 1);
            }
        }
    }

    .lsb-remove-button {
        &:active,
        &:focus,
        &:hover {
            .fill-color {
                fill: $bdl-gray;
            }
        }
    }

    .left-sidebar-link {
        &:active,
        &:focus {
            .left-sidebar-link-text {
                color: $bdl-gray;
                text-decoration: none;
            }
        }
    }
}

.left-sidebar-link-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    // @NOTE (04-23-2018): Safari automatically overrides showing of tooltips
    // https://stackoverflow.com/questions/20974276/prevent-safari-from-showing-tooltip-when-text-overflow-is-hidden-with-ellipsis
    &::after {
        display: block;
        content: '';
    }

    @include medium-size {
        display: none;

        .is-forced-open & {
            display: block;
        }
    }
}

// Override default navigation link tooltip visibility
.nav-link-tooltip {
    display: none;

    &.is-visible {
        display: block;
    }

    @include medium-size {
        display: block;

        .is-forced-open & {
            display: none;
        }
    }
}