@use '../../design-system' as *;

.searchBox {
    display: flex;
    border-radius: var(--radius-md);
    cursor: text;
    #{$selector-darkmode} & {
        input {
            background: color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%);

            &::placeholder {
                color: rgba(255, 255, 255, 0.6);
            }
        }
    }
}

.searchIcon {
    --icon-size: 28px;
    --icon-color: var(--color-fg-secondary);

    position: absolute;
    top: 24px;
    left: 24px;
}

input[type='search'].searchInput {
    width: 100%;
    height: var(--input-height);
    padding: $spacing-size-6 $spacing-size-6 $spacing-size-6 $spacing-size-16;
    font-size: 20px;
    border: none;
    outline: none;
    box-shadow: none;

    &:focus,
    &:focus-visible {
        box-shadow: none !important; // !important required to override complex input focus selectors
    }

    &::placeholder {
        color: var(--color-fg-quinary);
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        display: none;
    }
}

.gettingStarted {
    padding: $spacing-size-5;

    span {
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1.2pxs;
        color: var(--color-text-secondary);
        opacity: 0.6;
        font-size: 13px;
    }

    h3 {
        color: var(--color-link);
        font-size: 17px;
    }

    p {
        font-size: 15px;
    }

    a {
        margin-top: 12px;
        box-shadow: var(--shadow-sm);
        height: 100px !important;
    }
}
