Subscription Menu

.c-subscription-menu {
    &__trigger {
        display: none;
    }

    &__label {
        cursor: pointer;
        font-size: rem-calc(18);
        font-weight: 500;
        line-height: 2;
        padding-left: 40px;
        position: relative;
    }

    &__actor {
        background-color: $color-grey-lightest;
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        width: 25%;

        &::before {
            border-bottom: 20px solid $color-grey-lightest;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            content: '';
            height: 0;
            left: 35%;
            position: absolute;
            top: -20px;
            transform: translateX(-50%);
            width: 0;
        }
    }

    &__section {
        padding: rem-calc(10) 0;
    }

    &__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__section-title {
        color: inherit;
        display: block;
        font-size: 1.4em;
        font-weight: 500;
        line-height: 1;
        //border-bottom: rem-calc(2) solid;
        margin: 0 0 rem-calc(20) 0 !important;
        padding-bottom: rem-calc(8);
        position: relative;

        // BEN: border-color gets inherited from color BUT you CAN'T do sth. like "border-bottom: rem-calc(2) solid rgba(currentColor, 0.15)"...
        // (Short reasoning for the pseudo-element)
        &::before {
            border-bottom: rem-calc(2) solid;
            bottom: 0;
            content: '';
            left: 0;
            opacity: .15;
            position: absolute;
            right: 0;
            top: 0;
        }
    }

    &__anchor {
        border-bottom: 3px solid transparent;
        color: inherit;
        transition: border ease-in-out 150ms;

        &:hover {
            border-bottom: 1px solid currentColor;
        }
    }

    &__list--lvl1 {
        display: flex;
    }

    &__item--lvl1 {
        box-sizing: border-box;
        flex: 1 1 calc(100% / 6);
        padding: rem-calc(15);
    }

    &__list--lvl2 {
        line-height: 1.8;
    }
}

// Behaviour
.c-subscription-menu__trigger:checked ~ .c-subscription-menu__actor {
    display: block;
}

.c-subscription-menu__trigger:checked ~ .c-subscription-menu__label {
    //text-shadow: 0 0 1px $color-white;
}

.c-subscription-menu__item--lvl1:hover .c-subscription-menu__section-title::before,
.c-subscription-menu__item--lvl1.is-active .c-subscription-menu__section-title::before {
    border-color: $color-yellow;
    opacity: 1;
}

// Contexts via modifier

// Standalone (for usage directly in topbar, big screens)
.c-subscription-menu--standalone {
    @include breakpoint(medium down) {
        display: none;
    }
}

// Integrated (for usage inside of main menu, small screens)
.c-subscription-menu--integrated {
    .c-subscription-menu__label {
        display: block;
        margin: rem-calc(10) 0 rem-calc(10) rem-calc(20);
    }

    .c-subscription-menu__section-title {
        display: none;
    }

    .c-subscription-menu__actor {
        background-color: $color-grey-lightest;
        margin-top: 10px;
        position: relative;
        right: auto;
        top: 0;
        width: 200%;

        &::before {
            border-bottom-width: 13px;
            border-left-width: 13px;
            border-right-width: 13px;
            left: 50px;
            top: -13px;
        }
    }

    .c-subscription-menu__anchor {
        font-size: 1.2em;
        font-weight: 500;
        margin-left: rem-calc(30);
    }
}