.process-title,
.voting-title {
  @apply bg-gray-2 py-2 relative;

  .layout-content__container {
    @apply py-0;
  }

  .process-title-content {
    @apply flex-col md:flex-row flex items-start gap-y-2 md:items-center min-h-[28px];

    .dropdown__trigger {
      @apply flex no-underline px-1.5 py-1 text-sm flex-row items-center;

      svg {
        @apply block h-5 fill-white;
      }

      span {
        @apply text-white;
      }
    }

    &-icon-home {
      @apply flex items-center;

      svg {
        @apply w-5 h-5 fill-white;
      }
    }

    a.process-title-content-breadcrumb:hover {
      @apply cursor-pointer hover:backdrop-brightness-75 focus:backdrop-brightness-75;
    }

    &-breadcrumb {
      @apply text-md text-white rounded py-1 px-2 bg-transparent;

      &-no-active {
        @apply text-md text-white;
      }

      &-container-left {
        @apply block sm:flex items-center gap-x-4;
      }

      &-container-right {
        @apply ml-auto flex items-center gap-x-4;

        &-link {
          @apply flex items-center gap-x-1 px-1.5 py-1;

          span {
            @apply text-sm;
          }
        }

        svg {
          @apply w-4 h-4 fill-white;
        }

        .dropdown__item svg {
          @apply fill-gray;
        }
      }
    }

    &-dropdown {
      .dropdown__item {
        @apply flex-col items-start;

        ul {
          @apply ml-12;
        }

        a {
          @apply flex items-center gap-x-4 text-secondary;

          svg {
            @apply fill-gray;
          }

          &:hover {
            @apply underline;
          }
        }

        &:hover {
          @apply no-underline;
        }
      }
    }
  }
}

.process-title-content .button {
  @apply no-underline mb-0;
}

.secondary-nav__title,
.voting-title-content {
  @apply text-xs font-bold w-full text-white;
}

.dropdown {
  &__item {
    a[href*="components"] + ul {
      @apply hidden;
    }
  }
}