@import '../theme';

.column{
  width: 20rem;
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: $bg-2;
  @media (prefers-color-scheme: light) {
    background: $bga-2;
  }
  border-radius: 0.5rem;
  .column-title-bar{
    display: flex;
    align-items: center;
    padding: 0.5rem;
    h2{

    }
    .add-card-button{
      margin-left: auto;
      width: 3rem;
      height: 3rem;
      background: transparent;
      color: $fg-2;
      border: $fg-2 solid 2px;
      border-radius: 0.5rem;

      &:hover{
        box-shadow: 0 0 0.5rem 0 $fg-1 ;

      }
      @media (prefers-color-scheme: light) {
        color: $fga-2;
        border-color: $fga-2;
        &:hover {
          box-shadow: inset 0 0 0.5rem 0 $fga-2;
        }
      }
    }

  }
  .add-card-textarea-wrapper{

    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    .add-card-textarea{
      box-sizing: border-box;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      height: 7rem;
      min-height: 7rem;
      max-height: 15rem;
      border-radius: 0.5rem;
      border: none;
      background: $bg-4;
      color: $fg-2;
      @media (prefers-color-scheme: light) {
        background: $bga-4;
        color: $fga-2;
      }
    }
  }
  .card-list-wrapper{
    padding: 0.5rem;
    height: 100%;
    .card-list {
      list-style-type: none;
      display: flex;
      padding: 0;
      margin: 0;
      flex-direction: column;
      border-radius: 0.55rem;
      gap: 0.5rem;
      height: 100%;
    }
  }
  &:first-of-type, &:last-of-type {
    .card-list-wrapper > .card-list {
      background: repeating-linear-gradient(-45deg, $fg-5, $fg-5 0.5rem, $bg-3 0.5rem, $bg-3 1.5rem);
      @media (prefers-color-scheme: light) {
        background: repeating-linear-gradient(-45deg, $fga-5, $fga-5 0.5rem, $bga-3 0.5rem, $bga-3 1.5rem);
        border-color: $fga-2;
      }
    }
  }
}