@use '../../partials/dir';

.search-dialog__model {
  --modal-height: 380px;
  height: 100%;
  background-color: var(--bg-surface);
}

.search-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;

  &__input {
    padding: var(--sp-normal);
    display: flex;
    align-items: center;
    position: relative;

    & > .ic-raw {
      position: absolute;
      --away: calc(var(--sp-normal) + var(--sp-tight));
      @include dir.prop(left, var(--away), unset);
      @include dir.prop(right, unset, var(--away));
    }
    & > .ic-btn {
      border-radius: calc(var(--bo-radius) / 2);
      position: absolute;
      --away: calc(var(--sp-normal) + var(--sp-extra-tight));
      @include dir.prop(right, var(--away), unset);
      @include dir.prop(left, unset, var(--away));
    }
    & .input-container {
      min-width: 0;
      flex: 1;
    }

    & input {
      padding-left: 40px;
      padding-right: 40px;
      font-size: var(--fs-s1);
      letter-spacing: var(--ls-s1);
      line-height: var(--lh-s1);
      color: var(--tc-surface-high);
    }
  }
  &__content-wrapper {
    min-height: 0;
    flex: 1;
    position: relative;
    &::before,
    &::after {
      position: absolute;
      top: 0;
      z-index: 99;
      content: "";
      display: inline-block;
      width: 100%;
      height: 8px;
      background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-transparent));
    }
    &::after {
      top: unset;
      bottom: 0;
      background-image: linear-gradient(to bottom, var(--bg-surface-transparent), var(--bg-surface));
    }
  }

  &__content {
    padding: var(--sp-extra-tight);
    @include dir.side(padding,  var(--sp-normal), var(--sp-extra-tight));
  }

  &__footer {
    padding: var(--sp-tight) var(--sp-normal);
    text-align: center;
  }

}