@import "~terriajs-variables";
@import "../../../Sass/common/mixins";

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

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

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

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

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

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

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

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

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

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

  button {
    color: $text-light;
  }
}
.inner-close-btn {
  composes: btn from "../../../Sass/common/_buttons.scss";
  position: absolute;
  z-index: 10;
  top: $padding-small;
  right: $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 transform(rotate(45deg));
}

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

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

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

.section {
  padding: $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: $color-primary;
  }
}

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

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