@use '../helpers/functions' as *;

.docs-menu {
  background-color: $neutral-20;
  border-top: 1px solid $neutral-30;
  margin: 0 -16px;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: pxToRem(15) pxToRem(20);
    cursor: pointer;

    &.active {
      .docs-menu__button svg {
        transform: rotate(180deg);
      }
    }

    h2 {
      font-size: pxToRem(18);
      line-height: pxToRem(27);
      font-weight: 400;
      color: $neutral-90;
      margin: 0;
    }
  }

  &__content {
    display: none;
    padding: $spacer * 1.5 $spacer * 2 pxToRem(12);

    &.active {
      display: block;
    }
  }

  &__input {
    position: relative;
    margin-top: $spacer;
    margin-bottom: $spacer * 2;

    svg {
      position: absolute;
      top: 50%;
      left: $spacer;
      transform: translateY(-50%);
    }

    button {
      padding-left: $spacer * 2.8;
      color: $neutral-70;

      &:after {
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        margin-top: 1px;
        position: absolute;
        top: 50%;
        left: $spacer;
        transform: translateY(-50%);
        background: url('/icons/outline/search-white.svg') no-repeat;
      }
    }
  }

  &__button {
    padding: 0;
    outline: none;
    border: none;
    background-color: transparent;
    width: pxToRem(24);
    height: pxToRem(24);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__links {

    &-title {
      color: $neutral-98;
      font-weight: bold;
      font-size: pxToRem(18);
      line-height: pxToRem(27);
      margin: 0 0 $spacer;
      padding-top: $spacer * 0.5;
    }

    &-group {
      padding-bottom: pxToRem(4);

      &-heading {
        display: block;
        position: relative;
        margin-bottom: $spacer * 0.5;
        // hide native details marker
        &::-webkit-details-marker {
          display: none;
        }

        a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $neutral-70;
        }
      }

      summary:after {
        content: '';
        display: block;
        width: pxToRem(10);
        height: pxToRem(10);
        position: absolute;
        top: pxToRem(7);
        right: pxToRem(4);
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      &.active {
        .docs-menu__links-group-heading > a {
          padding: pxToRem(4) 0 pxToRem(4) $spacer;
          border-left: pxToRem(1) solid $primary-50;
          font-weight: 600;
          background-color: $neutral-30;
          color: $neutral-90;
        }

        summary:after {
          top: pxToRem(11);
        }
      }

      &[open=''] {
        summary:after {
          background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%238F98B3'/%3E%3C/svg%3E%0A");
        }
      }
    }

    &-submenu {
      margin-bottom: 0;
      padding-left: $spacer;

      &-item {
        margin-bottom: $spacer * 0.5;
        list-style: none;

        a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $neutral-70;
          font-size: pxToRem(14);
          line-height: pxToRem(21);
        }

        &.active {
          a {
            color: $primary-50;
          }
        }
      }
    }
  }

  @include media-breakpoint-up(xl) {
    background-color: $neutral-10;
    border-top: none;
    margin: 0;

    &__header {
      display: none;
    }

    &__content {
      display: block;
      padding: 0;
    }

    &__input {
      margin-bottom: 0;
    }

    &__links {
      margin-top: $spacer * 1.5;
    }

    &__links-group {
      &.active {
        .docs-menu__links-group-heading > a {
          background-color: $neutral-20;
        }
      }
    }
  }

  [data-theme='light'] & {
    border-color: $neutral-100;
    background-color: $neutral-94;

    &__button svg path {
      stroke: $neutral-30;
    }

    &__header {
      h2 {
        color: $neutral-30;
      }

      &__content svg {
        fill: $neutral-30;
      }
    }

    &__input {
      button {
        color: $neutral-50;

        &:after {
          mask: url('/icons/outline/search-white.svg') no-repeat;
          -webkit-mask: url('/icons/outline/search-white.svg') no-repeat;
          background: $neutral-30;
        }
      }
    }

    &__links {
      &-title {
        color: $neutral-30;
      }

      &-group {
        &-heading {
          a {
            color: $neutral-30;

            &:hover {
              color: $primary-50;
            }
          }
        }

        summary:after {
          background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.16667 0.916341C3.10476 0.869913 3.03115 0.841641 2.95409 0.834692C2.87702 0.827742 2.79954 0.842391 2.73033 0.876997C2.66112 0.911602 2.60291 0.964797 2.56223 1.03062C2.52155 1.09644 2.5 1.17229 2.5 1.24967V8.74968C2.5 8.82706 2.52155 8.90291 2.56223 8.96873C2.60291 9.03455 2.66112 9.08775 2.73033 9.12235C2.79954 9.15696 2.87702 9.17161 2.95409 9.16466C3.03115 9.15771 3.10476 9.12944 3.16667 9.08301L8.16667 5.33301C8.21842 5.2942 8.26042 5.24387 8.28934 5.18601C8.31827 5.12816 8.33333 5.06436 8.33333 4.99967C8.33333 4.93499 8.31827 4.87119 8.28934 4.81334C8.26042 4.75548 8.21842 4.70515 8.16667 4.66634L3.16667 0.916341Z' fill='%2328324d'/%3E%3C/svg%3E");
        }

        &.active {
          .docs-menu__links-group-heading > a {
            color: $primary-50;
            background: $neutral-90;
          }
        }

        &[open=''] {
          summary:after {
            background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66732 8.16667C4.70781 8.21588 4.75871 8.25552 4.81634 8.28273C4.87397 8.30995 4.93692 8.32406 5.00065 8.32406C5.06439 8.32406 5.12733 8.30995 5.18496 8.28273C5.2426 8.25552 5.29349 8.21588 5.33398 8.16667L9.08399 3.16667C9.13041 3.10476 9.15869 3.03115 9.16564 2.95409C9.17258 2.87702 9.15794 2.79954 9.12333 2.73033C9.08872 2.66112 9.03553 2.60291 8.96971 2.56223C8.90388 2.52155 8.82803 2.5 8.75065 2.5H1.25065C1.17327 2.5 1.09742 2.52155 1.0316 2.56223C0.965773 2.60291 0.912579 2.66112 0.877973 2.73033C0.843368 2.79954 0.828719 2.87702 0.835668 2.95409C0.842617 3.03115 0.87089 3.10476 0.917318 3.16667L4.66732 8.16667Z' fill='%2328324d'/%3E%3C/svg%3E");
          }
        }

        svg path {
          fill: $neutral-30;
        }
      }

      &-submenu {
        &-item {
          a {
            color: $neutral-30;

            &:hover {
              color: $primary-50;
            }
          }

          &.active {
            a {
              color: $primary-50;
            }
          }
        }
      }
    }

    @include media-breakpoint-up(xl) {
      background-color: $neutral-98;

      &__links-group {
        &.active {
          .docs-menu__links-group-heading > a {
            background-color: $neutral-94;
            color: $neutral-30;
          }
        }
      }
    }
  }
}