/* filmarchive.st.css */
@namespace "FilmArchive";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    laptop,
    --border-radius-lg,
    --spacing-unit;
}

:import {
  -st-from: "../../components/FilmArchive/filmarchive.st.css";
  -st-default: FilmArchive;
}

/* Import style API */
:import {
  -st-from: "../../components/Text/text.st.css";
  -st-default: Text;
}

:import {
  -st-from: "../../components/Divider/divider.st.css";
  -st-default: Divider;
}

:import {
  -st-from: "../../components/Drop/drop.st.css";
  -st-default: Drop;
}

:import {
  -st-from: "../../components/Chip/chip.st.css";
  -st-default: Chip;
}

:import {
  -st-from: "../../components/FormLabel/formlabel.st.css";
  -st-default: FormLabel;
}

:import {
  -st-from: "../../components/FormInput/forminput.st.css";
  -st-default: FormInput;
}

:import {
  -st-from: "../../components/FormSelect/formselect.st.css";
  -st-default: FormSelect;
}

:import {
  -st-from: "../../components/Button/button.st.css";
  -st-default: Button;
}

@st-scope Base {

  /* Keyword search */
  FilmArchive::searchFilterLabel {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
  }

  FilmArchive::keywordSearch {
    display: flex;
    align-items: flex-end;
  }

  FilmArchive::keywordSearch FormLabel {
    font-weight: normal;
    margin-bottom: calc(var(--spacing-unit) * 4);
  }

  FilmArchive::keywordSearch FormInput {
    width: 48%;
    margin-right: calc(var(--spacing-unit) * 2);
  }

  FilmArchive::keywordSearch FormInput::input {
    margin-bottom: 0;
  }

  FilmArchive::keywordSearchButton {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  /* Tag filters */
  FilmArchive::tagFilters {
    margin-bottom: calc(var(--spacing-unit) * 4);
  }

  FilmArchive::tagFilters .title {
    font-size: 1rem;
  }

  FilmArchive::tagFilters > Chip Button {
    margin: 0;
  }

  FilmArchive::taxonomyGroupTitle {
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  /* Results */
  FilmArchive::divider {
    margin-bottom: 0;
  }

  FilmArchive::resultsHeader {
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  FilmArchive::sortMenu {
    display: flex;
    align-items: center;
    order: 2;
  }

  FilmArchive::buttonIconList {
    padding: 0;
    width: 60px;
    height: 60px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius-lg);
    line-height: 0;
    order: 1;
  }

  FilmArchive::resultsHeader FormSelect FormLabel {
    white-space: nowrap;
    margin-right: calc(var(--spacing-unit) * 2);
  }

  FilmArchive::textResults {
    flex: 0 0 100%;
    margin-bottom: calc(var(--spacing-unit) * 4);
  }

  FilmArchive::resultsHeader FormSelect::select {
    margin-bottom: 0;
    padding-right: calc(var(--spacing-unit) * 4);
  }

  /* Info panel for warnings/errors */
  FilmArchive::infoPanel {
    text-align: center;
    padding: 3em;
  }

  /* Filters views mobile/desktop */
  FilmArchive::mobileFiltersView {
    display: block;
  }

  FilmArchive::desktopFiltersView {
    display: none;
  }
}

@media value(laptop) {
  @st-scope Base {
    FilmArchive::desktopFiltersView {
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      justify-content: left;
      max-width: 75%;
    }

    FilmArchive::tagFilters > Chip Button {
      margin-right: 5px;
    }

    FilmArchive::desktopFiltersView Drop::closeIcon {
      position: absolute;
      clip: rect(0 0 0 0);
      font-size: 0;
      color: transparent;
    }

    FilmArchive::desktopFiltersView Drop::dropHeader {
      justify-content: flex-start;
    }

    FilmArchive::desktopFiltersView Drop::mainContent {
      width: max-content;
    }

    FilmArchive::mobileFiltersView {
      display: none;
    }
  }
}