/*
 * The filter location component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.location-menu {
  background-color:#181818;
  border:1px solid #fff;
  border-bottom:none;
  color:#fff;
  display:flex;
  flex-direction:column;
  max-height:calc(var(--mobile-vh)*60);
  overflow-y:auto;
  width:calc(var(--grid-column-width)*7.5 + var(--grid-gap)*6.5);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .location-menu-caption {
    display:none;
  }
}

.location-menu-list {
  align-self:flex-end;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(2,1fr);
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .location-menu-list {
    grid-template-columns:1fr;
    width:100%;
  }
}

.location-menu-button {
  align-items:center;
  display:flex;
  height:48px;
  justify-content:flex-start;
  padding-inline:16px;
  position:relative;
  width:100%;
}

.location-menu-button:after {
  background-color:#f1ede4;
  bottom:0;
  content:"";
  height:1px;
  left:0;
  opacity:.4;
  position:absolute;
  transition:opacity .6s cubic-bezier(.25,.25,0,1),width .6s cubic-bezier(.25,.25,0,1);
  width:100%;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .location-menu-button:not(:disabled):hover:after {
    opacity:1;
    width:0;
  }
}

.location-menu--city .location-menu-list {
  align-self:center;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(3,1fr);
  width:100%;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .location-menu--city .location-menu-list {
    grid-template-columns:repeat(1,1fr);
  }
}

.location-menu-row {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  padding:20px;
}

.location-menu-row:not(:last-child) {
  border-bottom:1px solid #ffffff4d;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .location-menu-row:not(:last-child) {
    border-bottom:none;
    padding-bottom:30px;
  }

  .location-menu-row {
    grid-template-columns:1fr;
  }
}