/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.container {
    min-width: 28rem;
    max-width: 65rem
}

.container :global(.autocomplete__control) {
        will-change: border-color;
        font-family: "IbmPlexMono", monospace;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: calc(2.4em / 1.6);
        min-height: 0;
        padding: 0.4rem 0;
        border-width: 0 0 0.1rem 0;
        border-color: rgba(75, 69, 61, 0.3);
        outline: none;
        border-radius: 0;
        color: #4b453d;
        cursor: text;
        transition: border-color 0.2s ease
    }

.container :global(.autocomplete__control):global(.autocomplete__control--is-focused) {
            border-color: rgba(75, 69, 61, 0.6);
            outline: none;
            box-shadow: none;
        }

.container :global(.autocomplete__control):global(.autocomplete__control--menu-is-open) {
            border-color: rgba(75, 69, 61, 0.6);
            outline: none;
            box-shadow: none;
        }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) {
            padding: 0
        }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) > * {
                width: 100%;
            }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) :global(.autocomplete__placeholder) {
                padding: 0;
                color: rgba(75, 69, 61, 0.3);
            }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) :global(.autocomplete__input) {
                width: 100%;
                color: #4b453d
            }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) :global(.autocomplete__input) > input {
                    /* This is being used to avoid text sliding while typing */
                    width: 100% !important;
                }

.container :global(.autocomplete__control) :global(.autocomplete__value-container) :global(.autocomplete__single-value) {
                color: #4b453d;
            }

.container :global(.autocomplete__control) :global(.autocomplete__indicators) {
            display: none;
        }

.container :global(.autocomplete__menu) {
        margin: 0;
        background: #fff;
        border-radius: 0;
        box-shadow: 0 1.2rem 1.4rem 0 rgba(75, 69, 61, 0.22);
        cursor: pointer
    }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) {
            max-height: 20rem;
            padding: 0
        }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) :global(.autocomplete__option) {
                padding: 0.7rem 1.5rem;
                color: #4b453d;
                cursor: pointer
            }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) :global(.autocomplete__option):global(.autocomplete__option--is-focused) {
                    will-change: background-color;
                    background-color: transparent;
                    transition: background-color 0.2s ease
                }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) :global(.autocomplete__option):global(.autocomplete__option--is-focused):hover {
                        background-color: #f3ece5;
                    }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) :global(.autocomplete__option):global(.autocomplete__option--is-selected) {
                    background-color: transparent;
                    color: #4b453d;
                }

.container :global(.autocomplete__menu) :global(.autocomplete__menu-list) :global(.autocomplete__menu-notice) {
                padding: 0.7rem 1.5rem;
                color: rgba(75, 69, 61, 0.3);
                text-align: left;
                cursor: default;
            }