styles.scss

@import 'vars';
@import 'global';
@import 'link-list';

.js {
    [data-launchy] {
        display: none;
    }
}

.launchy__window {
    background-color: $off-white;
    border: transparent solid 1px;
    border-radius: 3px;
    bottom: 1rem;
    box-shadow: 1px 1px 10px $black;
    display: none;
    left: 1rem;
    padding: 1rem;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 9999;

    @media (min-width: $break-point) {
        bottom: auto;
        left: 50%;
        max-width: 30rem;
        padding: 2rem;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &--is-visible {
        display: block;

        [data-launchy] {
            display: block;
        }
    }
}

.launchy__content {
    position: relative;
}

.launchy__overlay {
    background-color: $black;
    background-color: $overlay-bg;
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9998;

    &--is-visible {
        display: block;
    }
}

.launchy__close-link {
    background-color: $purple;
    border-radius: 3px;
    color: $white;
    display: inline-block;
    font-size: 1.25rem;
    padding: .15rem .5rem;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;

    @media (min-width: $break-point) {
        right: -1rem;
        top: -1rem;
    }

    &:focus,
    &:hover {
        background-color: $dark-purple;
        color: $white;
        cursor: pointer;
    }
}

.launchy__title {
    font-family: $main-font;
    font-size: 2.5rem;
    margin: 0;
}

.launchy__launch-link {
    background-color: transparent;
    color: $white;
    display: inline-block;
    font-family: $main-font;
    font-size: 3.5rem;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 1px 1px 2px $black;

    @media (min-width: $break-point) {
        font-size: 6rem;
    }

    &:focus,
    &:hover {
        background-color: transparent;
        color: $white;
        cursor: pointer;
    }
}

.launchy__custom-control {
    background-color: $purple;
    border-radius: 3px;
    color: $white;
    display: inline-block;
    padding: .5rem;
    text-decoration: none;

    &:focus,
    &:hover {
        background-color: $dark-purple;
        color: $white;
    }
}