diplomas.sass

ul.diplomas
    @include list-reset
    > li
        margin-bottom: $spacing0
        @include media-breakpoint-up(desktop)
            margin-bottom: $spacing3
        > a
            @include h2
            display: block
            text-decoration: none
            padding-bottom: $spacing1
            padding-top: $spacing1
            border-bottom: 1px solid $color-border
            @include icon(arrow-right, after)
                align-self: center
                margin-left: auto
            &:hover
                color: $color-accent
            @include media-breakpoint-down(desktop)
                position: relative
                padding-right: $spacing1
                &::after
                    position: absolute
                    bottom: $spacing1
                    right: 0
            @include media-breakpoint-up(desktop)
                display: flex
                align-items: baseline
                span
                    margin-left: $spacing1
                
        .content
            @include grid(2, desktop)
            padding-bottom: $spacing1
            padding-top: $spacing1

        .programs
            @include media-breakpoint-down(desktop)
                margin-top: $spacing1
            li
                display: block
                border-bottom: 0
                padding: 0
                + li, > ol
                    margin-top: $spacing0
                    @include media-breakpoint-up(sm) 
                        margin-top: $spacing1
                a:hover
                    color: $color-accent
                ol li a   
                    @include inherit-text
                    @include media-breakpoint-up(sm)
                        @include h3
                    @include icon(list-hyphen, before)
                        margin-right: half($spacing0)
                        @include media-breakpoint-up(sm)
                            margin-right: $spacing0
                    display: flex
                    ol
                        margin-left: $spacing1
            > li a 
                @include h3
                        
        .program
            div
                @include media-breakpoint-up(desktop)
                    display: flex
                    > p
                        width: col(6)
            .title
                @include h4

.diplomas-select
    text-align: right
    position: relative
    @include meta
    button
        @include button-reset
        @include icon(caret, after)
            margin-left: 5px
    .dropdown-menu
        @include inset(calc(100% + #{$spacing0}), 0, auto, auto)
        background-color: $color-background-alt
        display: none
        position: absolute
        z-index: 2
        @include media-breakpoint-down(desktop)
            right: half(-$grid-gutter-sm)
            left: half(-$grid-gutter-sm)
        &,
        a
            color: black
        a
            
            display: block
            font-size: $body-size
            padding: $spacing1
            text-decoration: none
            white-space: normal
            @include media-breakpoint-down(desktop)
                padding: $spacing0 $spacing1
            &:not(:first-child)
                border-top: 1px solid $color-border
            &:hover
                background-color: $color-accent
                color: white

    button[aria-expanded="true"] 
        @include icon('caret-top', 'after')
        + .dropdown-menu
            display: block

.essential-container
    .container
        @include media-breakpoint-down(md)
            .buttons
                display: flex
                gap: $spacing1
                flex-wrap: wrap
        @include media-breakpoint-up(md)
            @include grid(2, md)
            align-items: flex-end
            .buttons
                display: flex
                justify-content: flex-end
                flex-direction: column
                align-items: end
                gap: $spacing1
                > *
                    width: col(2, 6)
                    min-width: 200px
            
    .essential
        color: $header-color
        flex-wrap: wrap
        font-size: $program-essential-font-size
        margin-bottom: 0
        margin-top: $spacing3
        @include meta
        @include media-breakpoint-up(desktop)
            @include grid(6, false, 0)
            font-size: $program-essential-font-size-desktop
        dt,
        dd
            margin: 0
            padding-bottom: $spacing0
            padding-top: $spacing0
            &:last-of-type
                padding-bottom: 0
        dt
            grid-column: 1/3
            color: $color-text-alt
            @include media-breakpoint-down(desktop)
                padding-bottom: 0
        dd
            grid-column: 3/7
            @include media-breakpoint-down(desktop)
                padding-top: 0
            a
                @include link($hero-color)

.diplomas__term
    ol.programs
        li
            @include grid(2, desktop)
            align-items: start
            a
                @include media-breakpoint-between(sm, desktop)
                    display: flex
                    margin-right: $spacing0
                    &::after
                        bottom: unset
                + p
                    margin-top: $spacing0
                @include media-breakpoint-down(sm)
                    &::after
                        transform: translateY(50%)