@import "bootstrap/scss/mixins";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "../../pdh_variables.scss";

.search {
    input.form-control {
        &:focus {
            box-shadow: none;
        }
    }
    &.search-monochromatic {
        background-color: rgba(255, 255, 255, 0.95);
        border: 0 none;
        border-radius: 0.375rem;
        input.form-control {
            color: var(--bs-primary);
            border: 0 none;
            background-color: transparent;
            &::placeholder {
                color: rgba(var(--bs-primary-rgb), 0.65);
            }
            &:focus {
                color: var(--bs-primary-dark);
                background-color: rgba(255, 255, 255, 1);
                &::placeholder {
                    color: rgba(var(--bs-primary-rgb), 0.75);
                }
            }
        }
        button {
            background-color: transparent;
            border: 0 none;
            color: rgba(var(--bs-primary-rgb), 0.85);
            &:hover,
            &:focus {
                color: rgba(var(--bs-primary-rgb), 1);
            }
        }
    }
    &.search-muted {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 0.375rem;
        input.form-control {
            color: white;
            border: 0 none;
            background-color: transparent;
            &::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }
            &:focus {
                color: var(--bs-primary-dark);
                background-color: rgba(255, 255, 255, 0.9);
                &::placeholder {
                    color: rgba(var(--bs-primary-rgb), 0.75);
                }
            }
        }
        button {
            background-color: transparent;
            border: 0 none;
            color: rgba($white, 0.85);
            &:hover,
            &:focus {
                color: rgba($white, 1);
            }
        }
        @include media-breakpoint-up(xl) {
            input,
            button {
                padding: 0.375 rem 0.75rem;
            }
        }
    }
}