@use '@justeat/fozzie/src/scss/fozzie' as f;

$search-button-bgColor: f.$color-interactive-brand;
$search-height-small: 56px;
$search-height-mid: 60px;

// Ask design to look at the design to see if we can normalise styles, we can then pull
// out most of the styles from here & probably the individual components so we can pull them in instead.
.c-search-placeholder {
    position: absolute;
    top: f.spacing();
    left: f.spacing(d);
    text-align: left;
    transition: all 0.3s;
    cursor: text;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    right: f.spacing(d);

    @include f.media('>=narrowMid') {
        top: 50%;
        transform: translateY(-50%);
    }
}

.c-search-input,
.c-search-placeholder {
    @include f.media('<narrowMid') {
        .has-geo & {
            right: f.spacing(f);
        }
        .has-geo.has-streetNumber & {
            right: 80px;
        }
    }
}

.c-search-label {
    position: relative;
    border: 1px solid f.$color-border-default;
    display: flex;
    width: 100%;
    align-items: center;
    height: $search-height-small;
    border-radius: f.$border-radius 0 0 f.$border-radius;
    @include f.font-size(body-s, false);
    font-weight: f.$font-weight-regular;
    line-height: 1.3;

    @include f.media('>=narrow') {
        @include f.font-size(body-l);
        height: $search-height-mid;
    }

    &.has-error {
        border-bottom: 1px solid f.$color-content-error;
    }
}

.c-search-input,
.c-search-streetInput {
    @include f.font-size(body-l);
    line-height: 1.25;
    border: none;
    outline: none;
    padding: f.spacing();
    font-family: f.$font-family-base;
    background-color: transparent;
}

.c-search-input {
    box-sizing: border-box;
    padding: 28px f.spacing(d) f.spacing();
    width: 100%;
    font-weight: f.$font-weight-bold;
    height: $search-height-small;

    // Hide the shadow dom search clear button.
    &::-webkit-search-cancel-button {
      display: none;
    }

    &::placeholder {
      text-transform: none;
    }

    // Add padding to input when new elements overlap field
    .has-streetNumber & {
      padding-right: 60px;
    }

    @include f.media('>=narrow') {
      height: $search-height-mid;
    }

    &:focus + .c-search-placeholder,
    &.is-notEmpty + .c-search-placeholder {
        @include f.font-size(caption);
        transform: translateY(0);

        @include f.media('>=narrowMid') {
            @include f.font-size(body-s, false);
            transform: translateY(-110%);
        }
    }
}

.c-megaModal--isFullWidth {
    > div {
        width: 100%;
    }
}
