@import 'branding-mixins';

$sidenav-link-height: 40px;

.Link.Link {
    align-items: center;
    display: inline-flex;
    height: $sidenav-link-height;
    justify-content: space-between;
    width: 100%;
    padding: 5px 10px;
    color: $color-text-blue-dark;

    h4 {
        color: inherit;
    }

    & > span {
        display: inline-flex;
        align-items: center;
    }

    &:hover,
    &:focus {
        text-decoration: none;
        color: var(--primary-color);
    }

    &:global(.active) {
        color: var(--primary-color);
        position: relative;

        &::before {
            @include primary-color-bg;
            opacity: 0.2;
            border: solid 1px $color-border-white;
            border-radius: 5px;
        }


        .Count {
            color: inherit;
        }
    }
}

.Label {
    position: relative;
}

.Icon {
    font-size: 20px;
    margin-right: 10px;

    .Collapsed & {
        margin-right: 0;
    }
}

.Count {
    color: $color-text-gray;
    font-weight: 700;
}

@mixin hover-poke-through($background-color) {
    position: absolute;
    padding: 11px;
    padding-left: 0;
    height: $sidenav-link-height;

    top: -10px;

    // Forces the label to stay on a single line
    // otherwise it will wrap every letter.
    white-space: nowrap;

    // Arbitrary number, just needs to be > 1 to avoid
    // overlapping with text and < 100 so the border gets covered by the ::before
    z-index: 10;

    background: $background-color;

    // Round the right corners of the h4 elements
    border-radius: 0 5px 5px 0;

    // Cover the border around the h4 to give it the "poke out/through" effect
    &::before {
        position: absolute;
        z-index: 100;
        border: solid 1px $color-border-white;
        border-left: 0;
        border-right: 0;
        background: transparent;

        // Needs to be set to render. Adding content messes things up. Don't do that.
        content: '';

        // Sized and positioned to be 1px larger on all sides
        // than the h4 to cover the border
        top: -1px;
        left: -1px;
        height: calc(2px + 100%);

        // Matches the width of the parent gutter
        // Check the width of the .Collapse:hover .LabelWrapper below)
        width: 26px;
    }
}

.Collapsed.Collapsed {
    // Center icons when collapsed
    justify-content: center;

    // Don't show count or the little expand-y
    // arrow when collapsed
    // Or the h4 when not hovered
    & > .Count,
    &:not(:hover) h4 {
        display: none;
    }

    &:hover .LabelWrapper {
        @include hover-poke-through($color-border-white);
        border: $color-border-gray 1px solid;
        border-left: 0;
        left: 28px;
        padding-right: 0;
        width: max-content;
    }

    &:hover h4 {
        position: relative;
        top: -21px;
        padding: 11px;
        z-index: 10;
        border-radius: 0 5px 5px 0;
    }

    &:hover:global(.active) h4 {
        position: relative;

        &::before {
            @include primary-color-bg;
            opacity: 0.2;
        }
    }

    &:hover:not(:global(.active)) h4 {
        background: $color-bg-white;
    }
}

.Toggle.Toggle {
    margin: -1px 15px;

    // Hides Expand/Collapse when not being hovered over
    &:not(:hover) h4 {
        color: $color-text-white;
    }

    &:hover .LabelWrapper::before {
        // Adjusts the white border to not cover the top gray line
        top: 0;
        height: calc(1px + 100%);
    }
}

.LabelWrapper {
    padding-left: 5px;
}
