@use "sass:math";

// cf. "Resize" hook
.no-user-select {
  user-select: none;
}

.no-pointer-events {
  pointer-events: none;
}

.side-panel {
  background-color: #fff;
  padding: 0.3em;
  width: 50vw;
  top: 3.7em;
  position: fixed;
  z-index: 1;

  .list-group {
    .list-group-item-heading {
      display: inline-block;
      width: 60px;
    }
  }

  @include right-handed {
    right: space-x(1);

    .header {
      float: right;
    }
  }


  @include left-handed {
    left: space-x(1);

    .header {
      float: left;
    }
  }


  // @TODO: better side panel management
  .texts-sidepanel {
    &__header {
      padding: $card-spacer-y $card-spacer-x 0;
      font-size: 20px;
      text-align: right;
    }

    &__body {
      padding-left: $card-spacer-x;
      padding-right: $card-spacer-x;

      .document-layout__title {
        font-size: 21px;
      }

      .document-layout__abstract__content {
        // max-height: 200px
        // overflow-y: scroll
        font-size: 16px;
      }
    }
  }
}

/* */

.join-button {
  padding-bottom: 100px;
  padding-top: 100px;
}

// Add pointer to Bootstrap Select
select.form-control {
  cursor: pointer;
}

#app {
  width: 100%;
}

.router {
  &__inner {
    display: flex;
    position: relative;

    @include left-handed {
      flex-direction: row-reverse;
    }


    @include right-handed {
      flex-direction: row;
    }
  }

  &__aside {
    // @TODO: topbar width
    $offset-y: 56px;
    $min-width: 200px;
    $default-width: 280px;

    flex-grow: 0;
    flex-shrink: 0;
    width: $default-width;
    min-width: $min-width;
    height: calc(100vh - #{$offset-y});
    z-index: z-index("main", "sidebar");

    &__inner {
      height: inherit;
      width: inherit;
      min-width: inherit;
      position: fixed;
    }

    &__handle {
      min-width: inherit;
      width: inherit;
      height: inherit;
      position: fixed;
      z-index: z-index("main", "handlebar");
      pointer-events: none;

      &__action {
        $handle-width: 8px;

        width: $handle-width;
        height: inherit;
        background: transparent;
        cursor: col-resize;
        position: absolute;
        right: - math.div($handle-width, 2);
        pointer-events: all;
      }
    }
  }

  &__body {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
  }
}

.main-page {
  $self: &;
  $page-padding: space-x(3) space-x(4);

  position: relative;

  &__main-row {
    display: flex;

    &--with-y-tiles {
      #{$self}__main-route {
        width: 60%;
      }

      #{$self}__vertical-tiles {
        width: 40%;
      }
    }

    &--only-y-tiles {
      // ensure minimum height, so that the border delimiting "main route" and
      // its "vertical tiles" will not end abruptly
      min-height: calc( 100vh - #{$topbar-height});
    }
  }

  // main route ~ main tile
  &__main-route {
    padding: $page-padding;
    width: 100%;
  }

  // optional vertical tiles ~ y axis column
  &__vertical-tiles {
    display: flex;
    flex-direction: column;
  }

  // optional horizontal tiles ~ x axis row
  &__horizontal-tiles {
    display: flex;
    flex-direction: row;

    // dynamic width according to number of tiles
    @for $i from 1 through 10 {
      &--#{$i} .tile-block {
        width: calc( 100% / #{$i});
      }
    }
  }
}

.tile-block {
  $tile-padding: space-x(0.5) space-x(2) space-x(1.5);

  &__header {
    display: flex;

    @include right-handed {
      justify-content: flex-end;
    }


    @include left-handed {
      justify-content: flex-start;
    }
  }

  &__body {
    padding: $tile-padding;
  }
}

.action-upload-button {
  $spinner-size: 23px;
  $spinner-left-offset: -32px;
  $spinner-top-offset: 6px;

  position: relative;

  &__spinner {
    position: absolute;
    width: $spinner-size;
    height: $spinner-size;
    left: $spinner-left-offset;
    top: $spinner-top-offset;
  }
}

// @TODO expand <tabs> to fit a ".main-page__main-route" with its padding
//       really KISS solution, better prevent the whole padding set (as the
//       likes of many pages, such as the Graph Explorer one)
.nodes-lists-layout-tabs,
.nodes-texts-layout-tabs,
.nodes-annuaire-layout-tabs {
  .nav.nav-tabs {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

.jitsi-iframe {
  height: 70em;
}

// based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e
.progress-pie {
  background: rgba(51, 122, 183, 0.1);
  border-radius: 100%;
  height: calc(var(--size, 14) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 14) * 1px);

  .progress-pie-segment {
    --a: calc(var(--over50, 0) * -100%);
    --b: calc((1 + var(--over50, 0)) * 100%);
    --degrees: calc((var(--offset, 0) / 100) * 360);
    -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
    clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
    height: 100%;
    position: absolute;
    transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: calc(1 + var(--over50));

    &:after,
    &:before {
      background: var(--bg, rgb(51, 122, 183));
      content: "";
      height: 100%;
      position: absolute;
      width: 100%;
    }

    &:before {
      --degrees: calc((var(--value, 45) / 100) * 360);
      transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
      transform-origin: 50% 0%;
    }

    &:after {
      opacity: var(--over50, 0);
    }
  }
}

/////////////////////////////////////////////:

// @TODO better responsive display for tablet screens
.home-title {
  $raw-logo-width: 334px;

  padding: space-x(3);
  display: flex;
  gap: space-x(3);
  margin-bottom: space-x(5);

  &__logo {
    flex-basis: $raw-logo-width;
    flex-shrink: 1;
  }

  &__jumbo {
    flex-grow: 1;
    position: relative;
  }

  &__folders {
    &:not(:first-child) {
      margin-top: space-x(3);
    }
  }
}

.home-tutorial {
  // for preload purpose
  $card-estimated-width: 712px;
  $card-estimated-height: 164px;

  text-align: center;

  .card {
    min-width: $card-estimated-width;
    display: inline-flex;

    &:not(:last-child) {
      margin-bottom: space-x(3);
    }
  }

  .card-body {
    min-height: $card-estimated-height;
  }

  .folder-view {
    display: inline-flex;
    flex-wrap: unset;
  }
}

.home-license {
  font-size: 15px;

  .b-icon {
    font-size: 12px;
  }
}

/////////////////////////////////////////////

.glyphitem {
  top: 0;
  display: inline-block;
  float: right;
  opacity: 0.6;
  padding-right: 5px;
  cursor: pointer;
  transition: transform 0.1s ease-out 0s;
  font-size: 15px;
  text-align: center;

  &:hover {
    display: inline-block;
    opacity: 1;
    transform: scale(1.4);
  }
}

/////////////////////////////////////////

.forest-tree-node-modal {
  // will enlarge popup when inner content is larger (see issue #315),
  // with a minimal width to avoid row item collapsing (see issue #324)
  width: fit-content;
  min-width: $node-popup-width;
  max-width: 100vw;
}

.node-popup-tooltip {
  .panel-actions {
    font-size: 90%;
    padding-left: space-x(2.5);

    .b-icon {
      margin-right: space-x(1);
      font-size: 11px;
    }

    &__almost-useable {
      color: $almost-useable;
    }

    &__development-in-progress {
      color: $development-in-progress;
    }

    &__ok-to-use {
      color: $ok-to-use;

      // (?) avoid unnecessary informations
      display: none;
    }
  }

  .popup-container {
    display: flex;
    flex-direction: column;

    &__header {
      .b-wad {
        .box-wrapper-action-rename .b-icon-button__inner {
          visibility: hidden;
        }

        &:hover {
          .box-wrapper-action-rename .b-icon-button__inner {
            visibility: visible;
          }
        }
      }
    }

    &__body {
      display: flex;
      justify-content: center;
      background-color: $body-bg;
    }

    &__body.toolbox-tabs-labels {
      border-bottom: 1px solid $gray-300;
      padding: space-x(2) space-x(7) 0;
    }

    &__cta {
      position: relative;

      &__button {
        font-size: 20px;
        padding: 0.7rem 1.5rem 0.6rem;
        display: list-item;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        margin-bottom: -1px;

        &:hover, &--active {
          border: 1px solid $gray-300;
        }

        &--active, &--active:hover {
          border-bottom-color: #fff;
        }
      }

      &__icon {
        $offset-y: 8px;
        $offset-x: 10px;

        position: absolute;
        top: $offset-y;
        right: $offset-x;
        font-size: 11px;
      }

      // @XXX SASS lacking of immediate parent selector
      &--almost-useable .popup-container__cta__icon {
        color: $almost-useable;
      }

      &--development-in-progress .popup-container__cta__icon {
        color: $development-in-progress;
      }

      &--ok-to-use .popup-container__cta__icon {
        color: $ok-to-use;

        // (?) avoid unnecessary informations
        display: none;
      }
    }

    .toolbox-tab-content {
      padding: space-x(4);
    }
  }

  .text-sup {
    vertical-align: super;
    font-size: x-small;
    margin: 0.33em;
  }
}

.copy-btn {
    margin-left: 0.5em;
}
