.tb-search-form {
    position: relative;
    margin-top: config('margin.8');
}

.tb-search-form__input-field {
    font-size: config('textSizes.lg');
    appearance: none;
    color: inherit;
    border-bottom: 1px solid config('colors.grey-dark');
    width: 100%;
    padding: config('padding.3') 0 config('padding.3') config('width.12');

    &::placeholder {
        color: inherit;
        opacity: config('opacity.50');
    }

    &:focus {
        border-color: config('colors.grey-darkest');

        &::placeholder {
            opacity: config('opacity.25');
        }
    }

    @include mappy-bp(xs) {
        font-size: config('textSizes.xl');
        padding: config('padding.4') 0 config('padding.4') config('width.16');
    }
}

.tb-search-form__submit-button {
    font-size: config('textSizes.xl');
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: config('width.12');
    display: flex;
    align-items: center;
    justify-content: center;
    color: config('colors.secondary');
    background: none;

    &:focus {
        color: config('colors.secondary-dark');

        & > svg {
            transform: scale(1.125);
        }
    }

    @include mappy-bp(xs) {
        font-size: config('textSizes.2xl');
        width: config('width.16');
    }
}
