.block-tabs-vertical {
  inline-size: 100%;
  background-color: $color-white;

  .grid-container {
    display: grid;
    row-gap: $spacing-xl;
  }

  &__heading {
    display: grid;
    width: 100%;
    max-width: $width-md;
    margin: auto;
    text-align: center;
    row-gap: $spacing-xsm;
  }

  &__content {
    display: grid;
    @include grid-cols(12);

    &-table {
      position: relative;
      display: flex;
      @include col-span(10);
      @include col-start(2);

      @include media-down(xl) {
        @include col-span(0);
      }

      @include media-down(lg) {
        flex-direction: column;
      }
      
      .tabs {
        position: relative;
        display: grid;
        width: occupies(4, 10);
        padding: 0;
        background-color: $color-white;
        box-sizing: content-box;
        z-index: 3;

        @include media-down(lg) {
          position: absolute;
          left: -100%;
          right: -100%;
          width: 100%;
          margin: auto;
          overflow: hidden;
          grid-template-rows: 0fr;
          transition: $transition-time ease-in-out;
          transition-property: border-radius, padding, grid-template-rows;
        }

        &-mask {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 0;
          background-color: rgba($color-black, 0.75);
          opacity: 0;
          z-index: 3;
          transition:
            opacity $transition-default,
            height 0ms $transition-time;
        }

        &-wrap {
          display: grid;
          min-height: 0;
          transition: $transition-time ease-in-out;
          transition-delay: 0ms;
          transition-property: transform;
          
          @include media-up(lg) {
            transform: translateY(0) !important;
          }
        }

        &-btn {
          position: absolute;
          display: flex;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding-right: $spacing-md;
          justify-content: end;
          align-items: center;
          z-index: 3;
          transition: z-index $transition-time ease-in-out $transition-time;
          @include icon('@/Images/icons/chevron-down.svg', 16px);

          @include media-up(lg) {
            display: none;
          }
        }

        &-close {
          display: flex;
          width: 40px;
          height: 0;
          padding-top: 0;
          margin: auto;
          justify-content: center;
          align-items: center;
          opacity: 0;
          overflow: hidden;
          transition: $transition-time ease-in-out;
          transition-property: height, padding-top, opacity;
          @include icon('@/Images/icons/close.svg', 16px);

          @include media-up(lg) {
            display: none;
          }
        }

        .tab {
          display: flex;
          width: 100%;
          padding: $spacing-xsm;
          column-gap: $spacing-xsm;
          border: 1px solid $color-black20;
          border-radius: 2px;
          text-align: left;
          align-items: center;
          background-color: $color-white;
          @include text;
          @include btn-focus-visible;

          &:not(:last-child) {
            margin-bottom: -1px;
          }

          span {
            display: flex;
            width: 32px;
            height: 32px;
            border-radius: 100%;
            background-color: $color-black10;
            justify-content: center;
            align-items: center;
            transition: $transition-default;
            transition-property: background-color;
            flex: 0 0 auto;
          }

          &:hover {
            span {
              background-color: var(--var-color);
            }
          }

          &.select {
            background-color: var(--var-color);

            span {
              background-color: $color-white !important;
            }
          }
        }
      }

      &-infos {
        padding: $spacing-xxl;
        margin-left: -1px;
        border: 1px solid $color-black20;
        border-radius: 2px;
        flex: 1;

        @include media-up(lg) {
          margin-top: 0 !important;
        }

        @include media-down(lg) {
          padding: $spacing-md;
          margin-left: 0;
        }

        .info {
          display: grid;
          grid-template-rows: 0fr;
          opacity: 0;
          transition:
            grid-template-rows 150ms ease-in-out 150ms,
            opacity 150ms ease-in-out;

          &.select {
            grid-template-rows: 1fr;
            opacity: 1;
            transition:
              grid-template-rows 150ms ease-in-out 150ms,
              opacity 150ms ease-in-out 300ms;
          }

          .wysiwyg {
            overflow: hidden;
          }
        }
      }
    }
  }

  &__button {
    display: flex;
    justify-content: center;
  }

  @include media-down(lg) {
    &.tabs--open {
      .tabs {
        padding: $spacing-xsm;
        border-radius:$spacing-xsm;
        grid-template-rows: 1fr;
        transition-delay: 0ms;

        &-mask {
          height: 100%;
          opacity: 1;
          transition:
            opacity $transition-default,
            height 0ms 0ms;
        }

        &-wrap {
          transition-delay: 50ms;
          transform: translateY(0) !important;
        }

        &-btn {
          display: block;
          z-index: -1;
        }

        &-close {
          height: 40px;
          padding-top: $spacing-xsm;
          opacity: 1;
        }
      }
    }  
  }
}