//- ----------------------------------
//- 💫 COMPONENTS > ASIDES
//- ----------------------------------

//- Aside

.c-aside
    @include breakpoint(min, md)
        @include position(absolute, top, left, 0, calc(100% + #{$aside-padding}))
        border-left: 1px solid $color-subtle
        opacity: 0.5
        transition: opacity 0.25s ease
        padding: 0 $aside-padding
        width: $aside-width

        &:hover
            opacity: 1

    @include breakpoint(max, sm)
        display: block
        margin: type(5) 0


//- Aside label

.c-aside__label
    display: block
    margin-bottom: 1rem


//  Aside container

.has-aside
    position: relative

    &:hover > .c-aside
        opacity: 1