@use '../abstracts/next_to_sidebar' as *;

html {
  height: 100%;
  height: -webkit-fill-available;
  block-size: -webkit-fill-available;
  block-size: stretch;
}

body {
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-block-size: -webkit-fill-available;
  min-block-size: stretch;
}

html,
body {
  background: var(--body-bg);
  padding: 0;
  margin: 0;

  &.for-app {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .hidden-for-app {
      display: none !important;
    }
  }

  &.for-cms {
    scroll-behavior: smooth;
  }
}

.main {
  @include next_to_sidebar;
  line-height: 1.5em;
  padding-top: 2rem;
  top: 3rem;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  &:after {
    content: '';
    height: 4rem;
    display: block;
  }

  /* This is a hack to make sure that another ".main" component is hidden,
   * instead of being partially seethrough. This happens when going to
   * /settings/connection-profile/irc-whatever, toggling "Show advanced settings",
   * and then going back to /settings/connections.
   */
  .for-app & {
    background: var(--body-bg);
  }
}

.overlay {
  background: #000;
  z-index: 800;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.3;
}

.language-selector {
  a:after {
    content: ' - ';
  }

  a:last-of-type:after {
    content: '';
  }
}
