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

.mobileModal {
  composes: scrollbars from "../../Sass/common/_base.scss";
  position: fixed;
  top: $mobile-header-height;
  bottom: 0;
  background: rgba(#fff, 0.9);
  left: 0;
  right: 0;
  color: $modal-text;
  display: none;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  &.isOpen {
    display: block;
  }
}

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

  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 100%;
}

.modal-top {
  height: $mobile-modal-top-height;
  width: 100%;
  background: $color-primary;
  box-shadow: 2px 0 2px rgba(100, 100, 100, 0.5);
}

.button {
  composes: btn from "../../Sass/common/_buttons.scss";
  color: #fff;

  width: auto;
}

.done-button {
  composes: button;

  float: right;
  padding: $padding;
}

.back-button {
  composes: button;

  float: left;
  height: 40px;
  width: 40px;
  padding: 5px;

  &--inactive {
    opacity: 0.5;

    &:focus,
    &:hover {
      opacity: 0.5;
    }
  }
}

.icon-back {
  height: 18px;
  width: 18px;
  margin: 6px;
  fill: #ffffff;
  stroke: #ffffff;
}

.data-catalog {
  composes: data-catalog from "../ExplorerWindow/Tabs/data-catalog-tab.scss";
}