tutorbookapp/tutorbook

@use 'styles/typography';
@use 'styles/loader';

$margin: 20px;
$image-size: 85px;
$height: $image-size + 2 * $margin;

.link {
  text-decoration: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.listItem {
  height: $height;
  position: relative;
  border-bottom: 1px solid var(--accents-2);
  box-sizing: border-box;
  border-top: none;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &.disabled {
    cursor: not-allowed;
  }

  &.loading {
    cursor: wait;

    .name,
    .bio {
      @include loader.loading();
      border-radius: 4px;
    }

    .bio {
      top: $margin * 2 + 24px;
      height: $height - (3 * $margin + 24px);
    }
  }

  &.avatar .name,
  &.avatar .bio {
    left: $height;
    width: calc(100% - #{$height + $margin});
  }

  .img {
    display: inline-block;
    position: absolute;
    left: $margin;
    top: $margin;
    width: $height - 2 * $margin;
    height: $height - 2 * $margin;
  }

  .name {
    @include typography.typography('body1');
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--on-background);
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: $margin;
    top: $margin;
    width: calc(100% - #{2 * $margin});
    height: 24px;

    .hours {
      color: var(--accents-6);
      font-size: 12px;
      background: var(--accents-2);
      padding: 4px 8px;
      border-radius: 12px;
      line-height: 1;
      margin: 0 8px;
    }
  }

  .bio {
    @include typography.typography('body2');
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accents-5);
    display: inline-block;
    position: absolute;
    left: $margin;
    top: $margin + 24px;
    width: calc(100% - #{2 * $margin});
    height: $height - (2 * $margin + 24px);
  }
}