@import '~@blueprintjs/core/src/blueprint.scss';
@import '~@blueprintjs/table/lib/css/table.css';
@import '~@blueprintjs/icons/src/blueprint-icons.scss';
@import '~@blueprintjs/select/src/blueprint-select.scss';
@import '~@blueprintjs/popover2/lib/css/blueprint-popover2.css';
@import './variables.scss';
@import './tables.scss';
@import './layouts.scss';
@import './blueprint-overrides.scss';
@import 'app/mixins.scss';
@import 'app/utils.scss';

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: $pt-font-family;
  font-size: $aleph-font-size;

  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

#root {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

h1 {
  font-size: $aleph-font-size * 1.7;
}

h2 {
  font-size: $aleph-font-size * 1.5;
  margin-top: $aleph-grid-size * 2;
}

pre {
  border: none;
  background-color: inherit;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

a {
  color: $aleph-link-color;
}

.small-screen {
  max-width: 400px;
  margin: 0 auto;
  padding: ($aleph-grid-size * 2);

  h1 {
    line-height: inherit;
  }
}

.small-screen-outer {
  display: table;
  position: absolute;
  height: 80%;
  width: 100%;
}

.small-screen-inner {
  display: table-cell;
  vertical-align: middle;
}

// Used to render failed imports, missing connections.
.PartialError {
  .#{$bp-ns}-non-ideal-state {
    min-height: 30vh;
  }
}

.text-muted {
  color: $aleph-greyed-text;
}

.text-page-title {
  font-size: 22px;
  color: $dark-gray1;
  margin: 0 0 $aleph-grid-size;
}

.text-page-subtitle {
  color: $dark-gray5;
  line-height: 1.5;
  clear: both;
  max-width: 700px;
}

.text-markdown {
  * {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: $aleph-grid-size 0 !important;
    padding: $aleph-grid-size 0 !important;
  }

  p {
    margin-bottom: $aleph-grid-size * 1.5 !important;
  }
}

.error-text {
  font-style: italic;
  color: $red1;
}

.clickable {
  cursor: pointer;
}

.info-tabs-padding {
  width: 100%;
}

.left-icon {
  @include rtlSupportInvertedProp(
    margin,
    right,
    $aleph-icon-padding !important,
    0
  );
}

.aleph-toaster {
  /* Hacky workaround to ensure toasts are visible even when scrolling */
  position: fixed !important;

  /* This causes toasts to appear *below* the navbar instead of on top of it */
  margin-top: $aleph-grid-size * 5;
}

.index {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.index-item {
  padding: $aleph-grid-size * 2.5 0;
  border-bottom: 1px solid $aleph-border-color;

  &:last-child {
    border: none;
  }

  &__title {
    font-weight: bold;
    margin-right: $aleph-grid-size * 3;
    max-width: $aleph-content-width-limit;

    &__text {
      display: inline-flex;
    }
  }

  &__summary {
    font-size: $pt-font-size;
    margin-bottom: $aleph-grid-size;
    max-width: $aleph-content-width-limit;
  }

  &__count {
    @include rtl(float, right, left);
    display: block;
    margin-top: 2px;
  }

  &__details {
    margin-bottom: 0;
    color: $aleph-greyed-text;

    .#{$bp-ns}-tag {
      @include rtlSupportInvertedProp(margin, left, $aleph-grid-size, null);
    }

    &__item {
      display: inline-block;
      min-width: 8em;
      margin: $aleph-grid-size * 0.5 0;
      @include rtlSupportInvertedProp(margin, right, 2em, null);

      .#{$bp-ns}-icon {
        @include rtlSupportInvertedProp(
          margin,
          right,
          $aleph-icon-padding,
          null
        );
      }

      .#{$bp-ns}-tag {
        vertical-align: middle;
      }
    }
  }
}

//small screen
@media screen and (max-width: $aleph-screen-sm-max-width) {
  .visible-sm-block {
    display: block !important;
  }

  .visible-sm-flex {
    display: flex !important;
  }

  .visible-sm-none {
    display: none !important;
  }
}

@media screen and (max-width: $aleph-screen-md-max-width) {
  .visible-md-flex {
    display: flex !important;
  }

  .visible-md-none {
    display: none !important;
  }
}
