@use "../mixins" as *;
@use "../media" as *;

.mobile-overlay {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    padding: 16px;

    &:modal {
        max-width: 100%;
        max-height: 100%;
    }

    &__close-button-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    &__list {
        @include flex-center;

        flex-direction: column;
        margin-top: 20px;
    }

    &__item {
        @include flex-center;

        width: 100%;
        transition: background-color var(--transition-duration-02);
        border-radius: var(--border-radius-10);
        margin-bottom: 0.5em;

        &:hover {
            background-color: var(--color-accent-80);
        }

        &-login {
            background-color: var(--color-accent);

            @include hover {
                background-color: var(--color-accent-80)
            }
        }

        &:nth-of-type(2) {
            margin-bottom: 1em;
        }
    }

    &__link {
        @include flex-center;
        width: 100%;
        min-height: 50px;
    }
}