/*
    Example layout:

        <button class="subtitle-title" disabled>
            <h3>Zelda 64: Recompiled</h3>
            <h1>Ocarina of Time</h1>
            <div class="subtitle-title__disclaimer">Coming Soon™</div>
        </button>
    - Variants:
        .subtitle-title--right (align to right side)
    - Optional:
        - <div class="subtitle-title__disclaimer">Coming Soon™</div>

*/

.subtitle-title {
    display: block;
    position: relative;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: auto;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    color: $color-text-dim;
    text-align: left;
    cursor: pointer;

    &--right {
        align-content: flex-end;
    }

    &--right, &--right > * {
        text-align: right;
    }

    &[selected] {
        color: $color-text;
        cursor: default;
    }
    
    &:focus:not(:disabled, [disabled]),
    &:hover:not(:disabled, [disabled], [selected]) {
        color: $color-primary;
    }

    &:not(:disabled, [disabled]) {
        @extend %nav-all;
    }

    &:disabled, &[disabled] {
        opacity: 0.5;
        cursor: default;
        tab-index: none;
    }

    h3 {
        margin-bottom: space(6);
    }

    h1 {
        margin-top: space(6);
    }

    &__disclaimer {
        @extend %label-sm;

        margin-top: space(16);
    }
}