@use "../common/utils" as *;
@use "../common/mixins" as *;

.page-no-results {
    background: #FFF;
    padding-block: calc-rem(50px) calc-rem(80px);

    &__wrapper {
        border-radius: var(--border-radius);

        @include media-breakpoint-up(lg) {
            border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        }

        .wrapper {
            padding-bottom: calc-rem(20px);

            @include media-breakpoint-up(lg) {
                padding: calc-rem(35px);
            }

            .search-input {
                margin-bottom: calc-rem(20px);

                @include media-breakpoint-up(lg) {
                    margin-bottom: calc-rem(30px);
                }
            }


            ul {
                list-style-type: none;
                padding-left: 0;
                margin-bottom: 0;

                li{
                    display: flex;

                    svg{
                        flex: none;
                        margin-top: calc-rem(4px);
                        margin-right: calc-rem(5px);
                    }
                }
            }

            .label {
                font-size: clamp-font(9px, 9px);
                background: rgba(var(--color-primary));
                color: rgba(var(--color-white));
                padding-inline: calc-rem(10px);
                height: calc-rem(22px);
                text-transform: uppercase;
                display: flex;
                align-items: center;
                justify-content: center;
                width: fit-content;
                border-radius: calc-rem(20px);
                margin: 0 auto calc-rem(20px) auto;
                font-weight: var(--font-weight-bold);
            }
        }

        nav {
            padding-block: calc-rem(30px) 0;
            flex-direction: column;

            @include media-breakpoint-up(lg) {
                padding: calc-rem(35px);
            }

            .button--arrow {
                justify-content: center;
                text-align: center;
            }
        }

    }
}
