@import "manrope";
@import "open-sans.css";
@import "reboot";
@import "variables";
@import "common-styles.scss";

/* sidebar */

.sidebar {
  width: $sidebar-width-closed;
  display: flex;
  top: $header-height;
  flex-direction: column;
  align-items: center;
  background-color: #FAFAFC;
  transition: all ease .2s;
  font-family: "Open Sans";
  position: fixed;
  max-height: calc(100vh - #{$header-height});
  min-height: calc(100vh - #{$header-height});

  .hideText {
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  .mobile-menu {
    max-width: 100%;
  }

  .double-arrow {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    transition: all ease .3s;
    cursor: pointer;

    &:before {
      content: url('../../assets/images/icons/icon-arrow.svg');
    }

    &:after {
      content: url('../../assets/images/icons/icon-arrow.svg');
      left: 3px;
    }

    &.menu-opened {
      transform: rotate(-360deg);
      left: auto;
      right: 10px;
    }
  }

  &.menuIsOpened {
    width: $sidebar-width-opened;

    .sidebar-list, .bootstrap-version {
      align-items: flex-start;
      padding: 25px;
    }

    .sidebar-list {
      padding-bottom: 15px;
      padding-top: 0;
      min-width: $sidebar-width-opened;

      &:first-child {
        padding-bottom: 25px;
        border-bottom: 1px solid #e2e2e2;
      }
    }

    .sidebar-list-fragment {
      padding: 15px;
      min-width: fit-content;

      .sidebar-item {
        padding-bottom: 10px;

        &.active {

          a {
            font-weight: 700;
            text-decoration: none;
          }
        }

        &:last-child {
          padding-bottom: 0;
        }
      }
    }

    .sidebar-list li.icon.active:after {
      transform: rotate(90deg);
    }
  }

  .bootstrap-version {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e2e2;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 25px 8px 30px 8px;

    span {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      font-family: sans-serif;
    }

    .btn {
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      border: 1px solid #DBDEDF;
      font-size: 12px;
      line-height: 16px;
      transition: all .15s ease-in-out;
      border-radius: 0;
      padding: 4px 8px;

      &:first-child {
        border-radius: 2px 0 0 2px;
        border-right: none;
      }

      &:last-child {
        border-radius: 0 2px 2px 0;
        border-left: none;
      }

      &.selected {
        background-color: #156DFF;
        color: #fff;
      }

      &:focus {
        outline: 0;
        box-shadow: none;
      }
    }
  }

  &-content {
    max-height: calc(100vh - 194px);
    min-height: calc(100vh - 194px);
  }

  &-list {
    margin: 0;
    list-style: none;
    align-items: center;
    line-height: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0px 8px;

    &.scroll-list {
      max-height: calc(100vh - 335px);
      overflow-y: auto;
    }

    &-fragment {
      padding: 15px;
      display: none;
      transition: opacity ease .3s;
      width: 100%;

      &.show {
        display: block;
      }

      a, p {
        display: block;
        width: 100%;
      }
    }

    &-box {
      display: flex;
      color: #262F56;
      text-decoration: none;
      margin: auto;
      cursor: pointer;
      position: relative;

      &.secondary-items {

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -25px;
          width: 4px;
          height: 20px;
          background-color: #2595FF;
          border-radius: 0px 2px 2px 0px;
          opacity: 0;
          transition: opacity ease .3s;
        }

        &:hover, &.show {

          &::before {
            opacity: 1;
          }

          a:hover, p:hover, p:first-child {
            font-weight: 700;
            text-decoration: none;
          }
        }
      }
    }

    li {
      position: relative;
      margin-top: 30px;

      p, a {
        color: #393D41;
        margin-bottom: 0;
      }

      &.sidebar-item {

        &-main {
          display: flex;
          letter-spacing: .1em;
          flex-wrap: nowrap;

          span, a {
            margin-left: 20px;
            margin-right: 10px;
          }

          img {
            width: 24px;
          }
        }

      }

      &.icon {

        &:after {
          content: url("../../assets/images/icons/icon-arrow.svg");
          display: inline-block;
          transform: rotate(-90deg);
          transition: all ease .2s;
          align-self: baseline;
        }

      }

      a:hover, p:hover {
        font-weight: 700;
        text-decoration: none;
      }

      &:hover,
      &.active {

        .sidebar-list-box:not(.secondary-items) {
          font-weight: 700;
          text-decoration: none;
        }
      }
    }
  }

  &-title {
    font-size: 1.125rem;
    color: #333;
    margin-top: 25px;
  }
}