@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/cfpb-button' as *;
@use '../../utilities/functions' as *;

:host {
  // Hide light DOM content.
  ::slotted(ul),
  ::slotted(ol) {
    display: none !important;
  }

  // This line-height settings is taken from base.scss.
  button {
    line-height: unitless-from-px(19px);
  }

  .o-form-search {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: rem-from-px(15px);

    // Tablet and above.
    @include respond-to-min($bp-sm-min) {
      flex-direction: row;
      border-left: 0;
      button[type='submit'] {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        flex-basis: 25%;
      }
    }

    .container {
      position: relative;
      width: 100%;
    }

    .popup {
      display: none;
      position: absolute;
      top: 34px;
      z-index: 100;
      background: white;
      border: 1px solid var(--pacific);
      border-top: 0;
      width: calc(100% - 2px);

      &::after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        bottom: -1px;
        border-bottom: 1px solid var(--pacific);
      }
    }

    .popup.show {
      display: block;
    }
  }
}