@use "stylesheets/decidim/buttons";

.layout-wrapper {
  &.is-nav-open {
    .layout-nav {
      @apply translate-x-0;

      .main-nav {
        @apply w-[100px];
      }

      .logo {
        @apply hidden;
      }
    }
  }

  .layout-nav {
    @apply absolute md:relative top-0 bottom-0 z-50 -translate-x-full md:translate-x-0 ease-in transition;

    .main-nav {
      @apply bg-gray-2 w-[120px] text-center last:pt-4;
    }

    .main-nav__modules {
      @apply pb-4 pt-0 border-b;

      border-color: #2a3745;
    }
  }
}

.main-nav ul {
  @apply list-none w-full;

  li {
    @apply pb-2;
  }

  a {
    @apply text-white py-2 block text-xs w-full bg-transparent transition;

    &:hover {
      background-color: rgba(4, 11, 23, 0.3);
    }
  }

  .is-active a {
    @apply text-white;

    background-color: rgba(4, 11, 23, 0.3);
  }

  svg {
    @apply w-5 h-5 block mx-auto mb-1 fill-background-4;
  }

  &.tab-x-container {
    @apply mb-6;

    svg {
      @apply mx-0 inline-block;
    }

    li {
      @apply pb-0;
    }

    a {
      @apply w-full flex gap-2 justify-center items-center text-md text-gray-2 border-gray border-b-2 py-2 rounded-t cursor-pointer;

      svg {
        @apply fill-gray-2 w-4 h-4 mb-0;
      }

      &:hover {
        @apply bg-white text-secondary border-secondary;

        svg {
          @apply fill-secondary;
        }
      }

      & .component-counter {
        @apply text-sm font-semibold text-white rounded-full bg-gray px-2;
      }
    }

    .sidebar-menu__item-disabled {
      @apply w-full flex gap-2 justify-center items-center text-md text-neutral-400 leading-9 border-none pb-0 rounded-t cursor-not-allowed;

      & .component-counter {
        @apply hidden;
      }

      svg {
        @apply fill-neutral-400 w-4 h-4 mb-0;
      }
    }

    .is-active a {
      @apply bg-white text-secondary border-secondary;

      svg {
        @apply fill-secondary;
      }

      & .component-counter {
        @apply no-underline bg-secondary;
      }
    }
  }
}

.main-tabs-menu {
  @apply flex flex-col sm:flex-row items-center border-b-2 border-neutral-300 mb-4 relative;

  &__tabs {
    @apply w-full sm:w-2/3;

    .main-nav {
      ul.tab-x-container {
        @apply mb-0;

        li {
          @apply pb-0;

          a {
            @apply border-b-0;
          }
        }

        span.sidebar-menu__item-disabled {
          @apply pt-0;
        }
      }
    }

    .tab-item {
      @apply relative pb-1;
    }

    .is-active {
      @apply font-medium text-secondary;

      a {
        @apply relative inline-block pb-1;

        &::after {
          @apply absolute left-0 -bottom-[0.10rem] h-[3px] w-full bg-secondary;

          content: "";
        }
      }
    }
  }

  &__buttons {
    @apply w-1/3 sm:w-auto sm:-mt-4 sm:ml-auto;
  }

  &__cta-button {
    @apply button button__xs button__secondary h-6;
  }
}
