CWC/styles/components/sidebar.css

/* Sidebar styles */

.sidebar{
    @apply pt-1;

    .widget {
        @apply mb-10;

        &:last-child { @apply mb-0; }

        h2,
        h3,
        .wp-block-heading {
            @apply m-0 mb-4 pb-0;

            color: var(--color-cwc-blue-01);
            font-family: var(--font-sans);
            font-size: var(--text-14px);
            font-weight: 600;
            letter-spacing: 0.11em;
            line-height: 1;
            text-transform: uppercase;
        }

        ul {
            @apply list-none m-0 p-0;

            li {
                @apply m-0 leading-none!;

                &:not(:last-child) { @apply mb-4; }

                a {
                    color: var(--color-dark);
                    font-size: var(--text-16px);
                    font-weight: 300;

                    &:hover { color: var(--color-cwc-blue-01); }
                }
            }
        }

        select {
            @apply px-5 py-3 rounded-sm border-2 border-cwc-blue-03;

            background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
            color: var(--color-dark);
            font-size: var(--text-16px);
            font-weight: 300;
            line-height: 1.1;

            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='%23F26B53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-position: right 1rem center;
            background-repeat: no-repeat;
            background-size: 0.75rem auto;
            padding-right: 2.75rem;

            &:focus-visible {
                border-color: var(--color-cwc-blue-01);
                outline-offset: 2px;
            }
        }

        .wp-block-search__label,
        .screen-reader-text {
            @apply absolute left-5 top-1/2 pointer-events-none;

            color: var(--color-dark);
            font-size: var(--text-16px);
            font-weight: 300;
            line-height: 1;
            transform: translateY(-50%);
            z-index: 2;

            &::before {
                content: "";
                display: inline-block;
                width: 1rem;
                height: 1rem;
                margin-right: 0.6rem;
                transform: translateY(1px);
                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z' fill='%23F26B53'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: contain;
            }
        }

        .wp-block-search {
            @apply relative;

            &:focus-within {
                .wp-block-search__label { opacity: 0; }
            }

            .wp-block-search__inside-wrapper { @apply relative; }

            .wp-block-search__input {
                @apply rounded-sm border-2 border-cwc-blue-03 px-5 py-3;

                background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
                color: var(--color-dark);
                font-size: var(--text-16px);
                font-weight: 300;
                line-height: 1.1;
                padding-left: 8.8rem;
            }

            .wp-block-search__button { @apply hidden; }

            &:has(.wp-block-search__input:not(:placeholder-shown)) { .wp-block-search__label { opacity: 0; } }
        }

        &.widget_search {
            @apply mb-9;

            .wp-block-search__input {
                &:focus-visible {
                    border-color: var(--color-cwc-blue-01);
                    outline-offset: 2px;
                }
            }
        }

        &:has(ul) {
            h2,
            h3,
            .wp-block-heading {
                @apply mb-2;

                &::after {
                    @apply block mt-2;

                    content: "";
                    height: 2px;
                    width: 100%;
                    background: var(--color-secondary);
                }
            }
        }

        .wp-block-archives__label {
            @apply sr-only;
        }
    }

    @media (max-width: 1023px) {
        .widget {
            ul a { font-size: var(--text-16px); }

            .wp-block-search__label,
            .screen-reader-text {
                font-size: var(--text-16px);
            }

            .wp-block-search .wp-block-search__input {
                font-size: var(--text-16px);
                padding-left: 7.7rem;
            }
        }
    }
}