.category-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.1rem 1rem;

  /* &:hover { */
  /* 	background-color: var(--pico-secondary-hover-background) */
  /* } */

  > .holder {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > .name {
      font-size: 1.2rem;
    }

    > .amounts {
      display: flex;
      gap: 0.5rem;
    }
  }

  > progress.-bad {
    --pico-progress-color: #b22222;
  }

  > progress.-good {
    --pico-progress-color: green;
  }
}

nav {
  padding-left: 2rem;
  padding-right: 2rem;
}

.flex {
  display: flex;
  gap: 1rem;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}

.title-button-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > .title {
    margin-bottom: 0;
  }

  > .buttons {
    display: flex;
    gap: 0.8rem;
  }
}
.categories-lists {
  padding-bottom: 1rem;

  > .titleholder {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > .title {
      margin-bottom: 0;
    }

    > .buttons {
      display: flex;
      gap: 1rem;
    }
  }
  > .categoriesholder {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    > div {
      width: 100%;
    }
  }
}

.transaction-dialog {
  .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    & select {
      margin-bottom: 0;
    }
  }
}
main.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.month-picker {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  padding-bottom: 1rem;

  > select {
    max-width: 10rem;
    margin-bottom: 0;
  }
  > button {
    flex-shrink: 0;
  }
}
.dialogtitle {
  font-size: 1.3rem;
}
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.transactionsholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.transactionsempty {
  display: grid;
  place-content: center;
  min-height: 10rem;
}
.transaction-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
  width: 100%;
  /* max-width: 50rem; */

  .row {
    display: flex;
    justify-content: space-between;
  }
  .row:nth-child(1) {
    font-size: 1.2rem;
  }
  .account {
    display: none;
  }
  .amount.pos {
    &::before {
      content: '+ ';
    }
    color: green;
  }

  .amount.neg {
    &::before {
      content: '- ';
    }
    color: red;
  }
  .categoryholder {
    display: flex;
    gap: 0.4rem;
    justify-content: start;
    align-items: center;

    .assign {
      --pico-border-radius: 0.6rem;
      --pico-form-element-spacing-vertical: 0.2rem;
      --pico-form-element-spacing-horizontal: 0.4rem;
    }
  }
}

.-gone {
  display: none;
}
@media (min-width: 768px) {
  .categories-lists > .categoriesholder {
    flex-direction: row;
  }
  .categories-lists > .categoriesholder > div {
    width: 50%;
  }

  .transaction-row > .row > .account {
    /* display: inline-block; */
    /* Disable for now */
    display: none;
  }
}

.flex-end {
  display: flex;
  justify-content: end;
}

.small-button {
  --pico-border-radius: 0.6rem;
  --pico-form-element-spacing-vertical: 0.3rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
}