@import '../styles/variables.scss';

.textbox {
    :global(.textBox--input) {
        border-radius: 30px;
        padding-inline-start: 30px;
        padding-inline-end: 30px;
        background: $light-gray;
        height: 32px;
        opacity: 1;
        transition: padding-right 0.3s ease, background-color 0.3s ease,
            box-shadow 0.3s ease, opacity 0.3s ease 0.1s;
    }
}

.square {
    .textbox {
        :global(.textBox--input) {
            border-radius: $default-border-radius;
        }
    }
}

.searchIcon {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    height: auto;
    margin-block-start: -1px;
    color: $clickable-item;
    cursor: pointer;
    transition: left 0.3s ease;
}

.clearIcon {
    position: absolute;
    z-index: 10;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    right: 10px;
    height: auto;
    margin-block-start: -1px;
    color: $clickable-item;
    cursor: pointer;
}

.main {
    position: relative;
    transition: width 0.3s linear;
    width: 100%;

    &.collapsed {
        width: 0 !important;

        .searchIcon {
            left: -5px;
        }

        :global(.textBox--input) {
            padding-inline-end: 0;
            background-color: transparent;
            border: none;
            box-shadow: none;
            opacity: 0;
        }

        .clearIcon {
            display: none;
        }
    }

    &.shrink {
        .textbox :global(.textBox--input) {
            padding-inline-end: 0;
            color: transparent; // hide the text when collapsed
        }

        .clearIcon {
            display: none;
        }
    }

    &.mobile {
        .textbox :global(.textBox--input) {
            border-radius: 6px;
            box-shadow: none;
            border: none;
            height: 39px;
        }

        input::placeholder {
            font-family: $duda-font;
        }

        .searchIcon {
            color: $darker-gray;
        }
    }
}