@use "src/styles/variables" as *;

$color-base-nested-nav: $color-tropical-blue;
$color-base-nested-nav-dark: $color-background-body;
$width-line: 2px;
$left-block-offset: $padding-large;
$left-line-offset: calc($width-line * 2);
$left-position: calc(-1 * ($left-block-offset - $left-line-offset));
$gap-section: calc($padding-large * 2);

.vm-nested-nav {
  position: relative;
  margin-left: $left-block-offset;
  border-radius: $border-radius-small;

  &_dark &-header {
    background-color: $color-base-nested-nav-dark;

    &:after, &:before {
      background-color: $color-base-nested-nav-dark;
    }

    &:hover {
      box-shadow: rgba($color-white, 0.08) 0 0 0 1px;
    }
  }

  &_mobile {
    margin-left: $padding-small;
  }

  &_root > &-header {
    &:before,
    &:after {
      display: none;
    }
  }

  &-header {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: $padding-small;
    padding: $padding-small;
    border-radius: $border-radius-small;
    transition: box-shadow 200ms ease-in-out;
    cursor: pointer;
    background-color: rgba($color-base-nested-nav, 0.4);
    margin-bottom: $padding-small;
    z-index: 2;

    &:after {
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      height: $width-line;
      width: calc($left-block-offset - $left-line-offset);
      background-color: $color-base-nested-nav;
      left: $left-position;
    }

    &:before {
      content: "";
      position: absolute;
      bottom: 50%;
      left: $left-position;
      height: calc(50% + $padding-small);
      width: $width-line;
      background-color: $color-base-nested-nav;
    }

    &:hover {
      box-shadow: rgba($color-black, 0.08) 0 0 0 1px;
    }

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      transition: transform 200ms ease-in-out;
      transform: rotate(-90deg);
      color: $color-text-secondary;

      &_open {
        transform: rotate(0);
      }
    }

    &__progress {
      grid-column: 2;
    }

    &__message {
      position: relative;
      grid-column: 2;
      line-height: 130%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -moz-box;
      -moz-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;

      &_show-full {
        display: block;
        overflow: visible;
      }

      &_duration {
        color: $color-text-secondary;
      }
    }

    &-bottom {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      grid-column: 2;
    }
  }

  &__childrens > .vm-nested-nav:not(:last-child) {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: $left-position;
      height: calc(100% + $gap-section);
      width: $width-line;
      background-color: $color-base-nested-nav;
    }
  }

  &__childrens > .vm-nested-nav_dark:not(:last-child) {
    &:before {
      background-color: $color-base-nested-nav-dark;
    }
  }

  &__childrens > .vm-nested-nav:last-child {
    margin-bottom: $gap-section;
  }
}
