/*
*********************************************************************************************
* Handles the scrollable pane body, titles, and tool drawer visibility.
*********************************************************************************************
*/
.pane {
  @media (min-width: 768px) {
    &:not(.active) {
      .pane-content,
      .tool-show {
        display: none;
      }
    }
    &.active {
      .pane-content,
      .tool-show {
        display: flex;
      }
    }
  }

  .pane-content,
  .tool-show {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    scrollbar-gutter: stable;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color-200, rgba(0, 0, 0, 0.2)) transparent;

    @supports (overflow: clip) {
      overflow-x: clip;
    }

    /**
     * Make pane content position absolute (and calculate correct width ourselves)
     * so that it works nicely with sliding animation, it's simply cut off.
     */
    @media (min-width: 768px) {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--bar-width);
      right: 0;
      width: auto;
    }
    @media (max-width: 767.5px) {
      margin-top: 30px;
    }

    > main {
      max-width: var(--content-max-width, 1400px);
      width: min(100%, var(--content-max-width, 1400px));
      margin-left: auto;
      margin-right: auto;
    }

    > .default-footer {
      margin-top: auto;
    }

    .pane-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--primary-color-800);
      @media (max-width: 767.5px) {
        flex-wrap: wrap;
      }

      .fas {
        font-size: 28px;
        position: relative;
        top: -2px;
      }

      span {
        font-weight: 700;
        line-height: 1;
        flex-grow: 1;
        display: inline-block;
        @media (min-width: 768px) {
          font-size: 36px;
        }
        @media (max-width: 767.5px) {
          font-size: 28px;
          min-width: 100px;
        }
      }

      span[data-subtitle]::after {
        content: attr(data-subtitle);
        display: block;
        margin-top: 6px;
        margin-left: 36px;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--primary-color-700, var(--text-secondary));
        @media (max-width: 767.5px) {
          margin-left: 32px;
          font-size: 18px;
        }
      }

      img {
        @media (max-width: 767.5px) {
          margin-left: auto;
        }
      }
    }
  }

  .pane-content::-webkit-scrollbar,
  .tool-show::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .pane-content::-webkit-scrollbar-track,
  .tool-show::-webkit-scrollbar-track {
    background: transparent;
  }

  .pane-content::-webkit-scrollbar-thumb,
  .tool-show::-webkit-scrollbar-thumb {
    background: var(--primary-color-200, rgba(0, 0, 0, 0.2));
    border-radius: 999px;
  }

  &.tools {
    .pane-content,
    .tool-show {
      @media (min-width: 768px) {
        left: 0;
        right: 0;
      }
    }
  }
}

body .pane.has-subtitle .pane-content main {
  gap: 24px;
}

@media (max-width: 767.5px) {
  body .pane.has-subtitle .pane-content main {
    gap: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1439.5px) {
  .pane:not(.home).active .pane-content main {
    margin: 32px 16px 64px;
    padding: 24px 20px;
    width: calc(100% - 32px);
  }

  .pane:not(.home).active .pane-content .pane-title span {
    font-size: 32px;
  }
}