mealz-planner-budget-edit-modal {
  .mealz-modal {
    width: 480px;

    .mealz-modal__content-container {
      padding-top: 0;

      .mealz-planner-budget-edit-modal__content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin: 16px 0 0;
      }

      .mealz-planner-budget-edit-modal__field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: relative;

        .mealz-planner-budget-edit-modal__input {
          padding: 12px 44px 12px 12px;
          border-radius: 8px;
          width: 100%;
          font-size: 16px;
          -moz-appearance: textfield;

          &::placeholder {
            font-style: italic;
            color: var(--mealz-ds-color-neutral-300, #B3BAC3);
          }

          &::-webkit-outer-spin-button,
          &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }

        .mealz-planner-budget-edit-modal__currency-icon {
          position: absolute;
          right: 16px;
          top: 50%;
          transform: translateY(-50%);
          width: 16px;
          height: 16px;
        }
      }

      .mealz-planner-budget-edit-modal__footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }

      .mealz-planner-budget-edit-modal__action-button {
        padding: 12px 24px;
      }
    }
  }

  @media (max-width: 600px) {
    .mealz-modal {
      width: unset;

      .mealz-modal__content-container {
        .mealz-planner-budget-edit-modal__button-container {
          flex-direction: column-reverse;

          > *:not(:first-child) {
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}