@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';
}