/**
 * We're assuming the form will always be 100% the width of its container and
 * that specific contexts will override that if it's needed.
 *
 * We're also assuming that, over time, we'll move the relevant styles out of
 * the parent theme, override stylesheets, and other places into this file.
 */

/**
 * This is the basic input + submit combo.
 *
 * It exists as a standalone, and as a component of other forms.
 *
 * +------------------------------+--+
 * |  Keys                        |🔎|
 * +------------------------------+--+
 */
.theme--dcc_reference {
  .form-item-text-search {
    color: var(--dcc-text-color);
    display: grid;
    grid-template-columns: auto var(--dcc-button-height);
    grid-template-rows: var(--dcc-button-height);
    width: 100%;
  }

  .form--inline > .form-item {
    float: none;
  }

  .form--inline.clearfix::after {
    content: none;
  }

  .form-text {
    border: 1px solid var(--dcc-pallete-neutral-mid-grey-600);
    color: var(--dcc-pallete-neutral-black);
    height: var(--dcc-button-height);
    max-width: none;
    width: 100%;
  }
}

@media screen and (min-width: 64rem) {
  .theme--dcc_reference {
    .form-item-text-search {
      grid-template-columns: auto var(--dcc-button-height-large);
      grid-template-rows: var(--dcc-button-height-large);
      width: 100%;
    }

    .form-text {
      height: var(--dcc-button-height-large);
      max-width: none;
      width: 100%;
    }
  }
}

/**
 * Variants
 *
 * The markup of these variants is not output by this component, but share
 * styles with it.
 *
 * A small amount of the css here is still overriding the parent theme, but it
 * mostly stands alone.
 *
 * Grid styles provided by grid.css, but overridden in small ways here.
 *
 * The variants are:
 *
 * FILTER
 * +----------------+ +--------------+
 * |      Type      | |      Day     |
 * +----------------+ +--------------+
 * +------------------------------+--+
 * |      Keys                    |🔎|
 * +------------------------------+--+
 *
 * FINDER
 * +----------------+ +-----------+--+
 * |   Facilities   | |   Keys    |🔎|
 * +----------------+ +-----------+--+
 */
.theme--dcc_reference {
  /* Common */
  .sf__form--finder,
  .sf__form--filter {
    display: block;

    .form--inline {
      &::after {
        content: none;
      }
    }

    .autocomplete__wrapper .autocomplete__dropdown-arrow-down-wrapper {
      top: 0;
      width: var(--dcc-button-height);
    }

    .form-item {
      float: none;
      height: 100%;
      margin-block: 0;
      margin-inline: 0;
      width: 100%;

      & *:where(div:not(.autocomplete__dropdown-arrow-down-wrapper), input) {
        height: var(--dcc-button-height);
        max-width: 100%;
        width: 100%;
      }
    }

    .form-text {
      border: none;
    }

    .form-actions {
      margin-block: 0;
      margin-inline: 0;
    }
  }

  /**
   * FILTER
   *
   * Overrides grid rows, templates, and areas, retaining other properties.
   */
  .sf__form--filter {
    .form--inline {
      grid-template-areas:
        "type date"
        "keys keys";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }

    .form-item-type {
      grid-area: type;
    }

    .form-event-date-end {
      grid-area: date;
    }

    .form-item-text-search {
      grid-area: keys;
    }
  }

  /**
   * FINDER
   *
   * No custom styles.
   */
}

@media screen and (min-width: 64rem) {
  .theme--dcc_reference {
    .form-text {
      height: var(--dcc-button-height-large);
    }

    .sf__form--filter {
      .form--inline {
        grid-template-areas: unset;

        & > * {
          grid-area: unset;
        }
      }
    }

    .sf__form--filter,
    .sf__form--finder {
      .form--inline {
        .form-item {
          & :where(div, input) {
            height: var(--dcc-button-height-large);
          }
        }
      }
    }
  }
}