// ============================================================================
// Component
// Prompt
// ============================================================================


// Component Logic ------------------------------------------------------------



// Component Styling ----------------------------------------------------------
.c-prompt {
    display: block;
    margin-top: ms(1.5, rem);

    // States
    &[hidden] {
        @include content-hide(remove);
    }

    .t-konami & {
        @include after-first(1) {
            margin-top: ms(6, rem);
        }

        // Breakpoints
        @include mappy-bp(palm-medium) {
            margin-top: 0;
        }
    }

    // Breakpoints
    @include mappy-bp(palm-medium) {
        @include component-size(100vh, 100vw, 0);

        align-items: center;
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    // Elements
    &__content {
        max-width: $global-type-measure;
        padding-left: ms(0.75, rem);
        padding-right: ms(0.75, rem);

        // Breakpoints
        @include mappy-bp(palm-medium) {
            margin-top: ms(0.5, rem);
            min-height: 60vh;
            padding-left: ms(1, rem);
            padding-right: ms(1, rem);
        }
    }

    &__title {
        font-size: ms(2, em);
        line-height: 1.1;

        // States
        &:focus {
            outline: none; // NOTE: Tabindex is assigned to the title by js when another prompt is requested
        }

        // Breakpoints
        @include mappy-bp(palm-medium) {
            line-height: 1;
        }
    }

    &__directions {
        margin-top: ms(0.75, em);

        font-size: ms(1, em);

        a {
            background-size: rem(36) rem(36);
            background-origin: padding-box;
            background-position: 0 85%;
            background-repeat: repeat-x;

            color: currentColor;
            text-decoration: none;

            // Breakpoints
            @include mappy-bp(palm-medium) {
                background-position: 0 60%;
            }
        }
    }

    &__example {
        margin-top: ms(1.25, em);

        font-weight: $font-weight-medium;
        line-height: 1.4;

        // Breakpoints
        @include mappy-bp(palm-medium) {
            margin-top: ms(2, em);
            margin-right: ms(4, rem);

            font-size: ms(0.75, em);
            line-height: $global-type-line-height;
        }

        a {
            background-size: rem(16) rem(16);
            background-origin: padding-box;
            background-position: 0 64%;
            background-repeat: repeat-x;

            color: currentColor;
            text-decoration: none;

            // Breakpoints
            @include mappy-bp(palm-medium) {
                background-position: 0 61%;
                background-size: rem(26) rem(26);
            }
        }
    }
}
