@use '@styles/variables.module.scss' as *;

.barber-dashboard {
  padding: 5rem;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5rem;

  :nth-child(4),
  :nth-child(5) {
    grid-column: span 3;
  }

  .value {
    display: block;
    margin-top: 1rem;

    font-size: 2rem;
    font-weight: 800;
    color: $color-primary;
  }

  .action {
    padding-block: 1rem;
  }

  .table-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .table-title-name {
      display: block;
      height: 1.7rem;
      font-weight: 600;
    }
  }

  .date-container {
    display: flex;
    flex-direction: start;

    .date {
      width: 6.5rem;

      display: flex;
      flex-direction: column;
      align-items: center;

      .date {
        font-size: 1.15rem;
        font-weight: 600;
      }

      .slot {
        color: $color-primary;
        font-size: 1.05rem;
        font-weight: 500;
      }
    }
  }

  .amount-spent {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    .amount {
      font-size: 1.5rem;
      font-weight: 600;
    }
  }

  .services {
    font-size: 1.08rem;
    font-weight: 600;

    .no-services {
      color: $color-primary;
      font-style: italic;
      font-weight: 500;
    }
  }

  .review-comment {
    display: flex;

    .comment {
      color: $color-lighter;
      font-size: 1.2rem;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .review-date {
    display: flex;

    .date {
      color: $color-primary;
      font-size: 1.2rem;
      font-weight: 600;
    }
  }
}
