sparkletown/sparkle

@import "scss/constants.scss";

$add-user-dimensions: 50px;
$title-min-width: 70px;

.TableComponent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  &__item {
    height: 100%;
    background: $secondary--live;
    border-radius: $border-radius--xl;
    min-height: $spacing--xxl;
    color: $content--over;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: $spacing--lg;
    position: relative;
    margin: $spacing--xs;

    &:hover {
      background-color: lighten($secondary--live, 10%);
      transform: scale(1.05);
    }
  }

  &__item-wrapper {
    display: flex;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    margin-bottom: $spacing--md;
  }

  &__title {
    min-width: $title-min-width;
    margin: 0 auto;
  }

  &__occupancy-warning {
    top: $spacing--xs;
    left: $spacing--sm;
    position: absolute;
    font-size: 10px;
    color: $primary--over;
  }

  &__profile-icon {
    background: $content--under;
    border-radius: $border-radius--xl;
  }

  &__add-user {
    @include square-size($add-user-dimensions);

    display: flex;
    font-size: $font-size--xl;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: $spacing--sm;
    margin-right: $spacing--sm;
    background-color: rgba(black, 0.4);
    color: rgba(black, 0);
    transition: all 400ms $transition-function;
    font-size: 2rem;
    cursor: pointer;

    &:hover {
      background-color: $content--over;
      transform: scale(1.05) rotate(90deg);
      color: rgba(black, 0.7);
      box-shadow: box-shadow--table(var(--content--over-60a));
    }
    &:active {
      transform: scale(0.95) rotate(90deg);
      box-shadow: box-shadow--table(var(--content--over-20a));
    }
  }

  &__users {
    display: flex;
    margin-left: $spacing--xs;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  &__delete-icon {
    margin-left: auto;
    margin-top: -($spacing--md);
    opacity: 0.6;
    cursor: pointer;
    position: absolute;
    right: $spacing--sm;

    &:hover {
      opacity: 1;
    }
  }

  &__modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    width: 90%;
  }

  &__modal-buttons {
    display: flex;
    justify-content: space-around;
    width: 90%;
  }
}