.budget {
  &-list__map {
    @apply lg:-ml-16 -mt-6 lg:-mt-12 mb-6 aspect-square lg:aspect-[21/9] [&>*]:h-full [&+*]:mt-6 lg:[&+*]:mt-12;
  }

  &-summary {
    &__content {
      @apply bg-tertiary p-4 lg:h-full lg:p-0;
    }

    &__container {
      @apply -mt-12 -my-16 mb-8;

      .budget-summary {
        @apply -ml-16;
      }
    }

    &__content__header {
      @apply col-span-2 text-2xl pb-2 mb-2;

      .ql-editor {
        @apply inline-block text-2xl;
      }
    }

    &__content__header--title {
      @apply font-semibold;
    }

    &__content__header--description {
      @apply text-sm;
    }

    &__progressbar {
      @apply my-0 xl:my-4 relative;

      .budget-progress {
        @apply bg-white rounded h-2;
      }

      &--minimum {
        @apply absolute h-2 bg-gray-3 rounded-s;
      }

      &--meter {
        @apply h-2 rounded-s absolute;
      }
    }

    &__progressbar-marks {
      @apply grid grid-cols-[70%_1fr_1fr] mt-2;
    }

    &__progressbar-marks_center {
      @apply text-center -translate-x-2/4;
    }

    &__progressbar-marks_right {
      @apply justify-self-end text-left lg:text-right;
    }

    &__progressbar-legend {
      @apply text-xs lg:text-sm block;
    }

    &__progressbar-legend-strong {
      @apply font-semibold block text-[10px] lg:text-sm text-nowrap;
    }
  }

  &__card__list-budget--highlighted {
    @apply ring-warning;
  }

  &__card__list-budget--progress {
    @apply ring-warning;
  }

  &__card__list-budget--voted {
    @apply ring-success;
  }

  &__card__list-project {
    @apply ml-auto rounded py-3 px-4 bg-background w-64 md:w-96 flex flex-col justify-center items-center xl:flex-row xl:justify-between xl:place-items-center;
  }

  &__card__list-project__amount {
    @apply font-semibold text-gray-2 text-xl inline-block m-auto;

    span {
      @apply text-md;
    }
  }

  &__card__highlight-vote {
    @apply justify-center flex w-full xl:w-2/5 items-center bg-background p-4 bg-background font-bold text-gray-2 ml-auto;
  }

  &__card__highlight-vote__header {
    @apply place-items-start w-1/3;
  }

  &__card__highlight-vote__number {
    @apply text-xl font-semibold;

    span {
      @apply text-sm;
    }
  }

  &__card__highlight-vote__button {
    @apply mt-auto text-left;

    &.button__secondary:hover {
      @apply text-white #{!important};

      background: rgb(var(--secondary-rgb) / var(--tw-bg-opacity)) !important;
    }

    &.button__transparent-secondary:hover {
      @apply border-secondary text-secondary #{!important};

      background: #fff !important;
    }
  }

  &__definition-project__title .ql-editor {
    @apply text-4xl mb-4;
  }

  &__definition-data__title {
    @apply text-sm text-gray-2 mb-2 block;
  }

  &__definition-data__number {
    @apply text-gray-2 font-bold text-3xl bg-background text-center p-2 rounded;

    span {
      @apply text-2xl;
    }
  }

  &__filter-title {
    @apply font-bold mb-4;
  }

  &__filter__container {
    @apply my-4 rounded p-2 border-4 border-white;
  }

  &__list--header {
    @apply flex items-center justify-between;
  }

  &-list {
    .card__list {
      @apply pr-0;
    }

    .card__link {
      @apply mb-2 block;
    }

    .tag-container {
      @apply [&:not(:first-child)]:px-6;
    }

    .card__list-content {
      @apply w-full cursor-pointer;
    }

    .project-item {
      @apply flex gap-4;

      .card__list {
        @apply inline-block w-[65%];

        &-metadata span {
          @apply text-xs;
        }
      }

      + .project-item {
        @apply mt-6;
      }
    }
  }
}

#budgets-to-vote {
  .card__highlight-text {
    @apply w-full lg:w-[70%] p-0;
  }

  .order-by {
    @apply mb-8;
  }
}

.verification-modal .card__list .budget__card__list-project {
  @apply inline-block w-80 sm:w-48 text-center;
}

#budgets.card__highlight-container {
  @apply mb-0;
}

.progressbox-fixed-wrapper {
  @apply bg-tertiary fixed hidden inset-x-0 inset-y-0 h-max z-40;

  box-shadow: 0 4px 6px 0 rgba(211, 211, 211, 0.25);
}

.progressbox-fixed-wrapper.is-progressbox-visible {
  @apply block;
}

#budget-confirm .card__list__project-voted {
  @apply hover:border-background cursor-default flex-row;

  .card__list-title {
    @apply cursor-default no-underline;
  }

  .card__list__content {
    @apply w-[75%];
  }
}

.budget-summary__progressbox--checked_out {
  @apply hidden lg:block;
}

.budget-summary__content {
  @apply lg:grid lg:grid-cols-12 lg:items-center lg:px-16 pt-4 px-4;
}

.budget-summary__progressbox {
  @apply lg:col-span-8;
}

.budget-summary__progressbox-buttons {
  @apply lg:col-span-3 lg:col-start-10;
}

.budget-summary__button-modal {
  @apply hidden xl:text-secondary xl:block xl:col-span-12 xl:mb-4 xl:pb-4;
}

.budget-summary__button-dropdown {
  @apply col-span-12 text-secondary xl:hidden;

  &_text {
    @apply flex gap-4 justify-start;

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

  p {
    @apply text-gray-4 font-normal text-[13px];
  }
}

.progressbox-fixed-wrapper {
  .budget-summary__progressbar {
    @apply lg:pl-32 lg:pr-8;
  }

  .budget-summary__progressbox {
    @apply lg:col-span-5 lg:col-start-4;
  }

  .budget-summary__progressbox-buttons {
    @apply lg:col-start-10 lg:col-span-2;
  }
}

#project-item {
  .budget-summary__content {
    @apply py-4 lg:py-4 lg:container lg:grid grid-cols-1 lg:grid-cols-12 lg:items-center;
  }

  .budget-summary__progressbox {
    @apply lg:col-start-2 lg:col-span-7 relative;
  }

  .budget-summary__progressbox-buttons {
    @apply lg:col-start-10 lg:col-span-2;
  }

  .budget-summary__button-modal {
    @apply hidden xl:text-secondary xl:block xl:col-span-10 xl:col-start-2 xl:justify-start;
  }

  .budget-summary__button-dropdown {
    @apply block text-secondary col-span-10 col-start-2 justify-start xl:hidden;
  }

  .progressbox-fixed-wrapper {
    .budget-summary__progressbar {
      @apply lg:col-start-1 lg:col-span-7;
    }
  }
}
