@use "../../../Sass/common/_variables";
@use "../../../Sass/common/mixins";

.panel {
  width: auto;
  font-family: variables.$font-base;
}

.content {
  composes: scrollbars from "../../../Sass/common/_base.scss";

  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
}

.inner {
  @include mixins.transform(scale(0) translateZ(0));
  @include mixins.transition(0.2s all cubic-bezier(0.4, 0, 0.2, 1));
  @include mixins.transform-origin(50%, top);

  box-shadow: variables.$box-shadow;
  z-index: 20;
  border-radius: variables.$radius-small;
  // background: $dark;
  color: variables.$text-light;
  border: variables.$border-style;
  max-width: calc(100vw - 10px);

  position: fixed;
  top: variables.$mobile-header-height;
  left: 0;
  margin: 14px 5px 5px 5px;

  @media (min-width: variables.$sm) {
    position: absolute;
    right: variables.$padding * 2;
    top: auto;
    bottom: auto;
    left: auto;
    margin: 14px 0 0 0;
  }

  &.is-open {
    @include mixins.transform(scale(1) translateZ(0));
  }

  &.show-dropdown-in-center {
    @include mixins.transform(scale(0) translate3d(-50%, 0, 0));
  }
  &.is-open.show-dropdown-in-center {
    @include mixins.transform(scale(1) translate3d(-50%, 0, 0));
  }

  &.show-dropdown-as-modal {
    @include mixins.transform(translate3d(0, -300px, 0));
    opacity: 0;
  }
  &.is-open.show-dropdown-as-modal {
    @include mixins.transform(translate3d(0, 0, 0));
    opacity: 1;
  }

  button {
    color: variables.$text-light;
  }
}
.inner-close-btn {
  composes: btn from "../../../Sass/common/_buttons.scss";
  position: absolute;
  z-index: 10;
  top: variables.$padding-small;
  right: variables.$padding-small;

  // &:hover,
  // &:focus {
  //   svg {
  //     fill: $color-primary;
  //   }
  // }

  svg {
    // fill: $grey;
    // fill: $text-light;
    height: 10px;
    width: 10px;
  }
}
.inner-close-btn--for-modal {
  top: 15px;
  right: 15px;

  // svg {
  //   fill: $grey;
  // }
}

.caret {
  content: "";
  display: block;
  height: 20px;
  width: 20px;
  // background: $dark;
  position: absolute;
  top: -10px;
  z-index: -1;
  @include mixins.transform(rotate(45deg));
}

.label {
  padding: variables.$padding-small 0;
  display: block;
}

.heading {
  composes: label;
  padding: variables.$padding-small 0;
  font-size: variables.$font-size-small;
}

.sub-heading {
  composes: label;
  font-size: variables.$font-size-mini;
}

.section {
  padding: variables.$padding-small;
  display: block;
}

.button {
  composes: btn from "../../../Sass/common/_buttons.scss";
  composes: btn--map from "../../../Sass/common/_buttons.scss";

  // border-radius: $radius-small;
  border-radius: 0;
  position: relative;
  border: 0;

  svg {
    // fill: #6487ae;
    // margin: 0 3px 1px 4px;
    // vertical-align: middle;
  }

  span {
    line-height: 1.3;
  }

  // .is-open & {
  //   background: $color-primary;
  //   svg {
  //     fill: #ffffff;
  //   }
  // }

  &:hover,
  &:focus {
    border: 0;
    svg {
      fill: #ffffff;
    }
  }
}
.button-for-modal-dropdown {
  svg {
    fill: variables.$color-primary;
  }
}

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.link {
  @include mixins.link(variables.$dark);
}