graycoreio/daffodil

@use 'demo-theme';
@use 'utilities' as *;

:host {
    display: block;
    background: demo-theme.daff-color(demo-theme.$neutral, 100);
    color: demo-theme.$white;
    padding: 50px 25px;
    margin: 0;

    @include breakpoint(tablet) {
        padding: 75px 50px;
    }

    @include breakpoint(laptop) {
        padding: 75px 0;
    }
}

.demo-newsletter {
    &__grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 50px 0;
        text-align: center;

        @include breakpoint(big-tablet) {
            grid-template-columns: 1fr 1fr;
            grid-gap: 0 50px;
            text-align: left;
        }
    }

    &__title {
        @include embolden();
        font-size: 1.5rem;
        margin: 0;
        padding-bottom: 15px;
        text-transform: uppercase;
    }

    &__right {
        display: flex;
        flex-wrap: wrap;
    }

    &__input {
        width: 60%;
        border: 1px solid demo-theme.$white;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        @include breakpoint(tablet) {
            width: 70%;
        }

        &:focus, &:hover {
            border: 1px solid demo-theme.$white;
        }
    }

    &__button {
        width: 40%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        @include breakpoint(tablet) {
            width: 30%;
        }
    }
}