tutorbookapp/tutorbook

@use 'sass:map';
@use 'styles/typography';
@use 'styles/loader';
@use '@material/elevation';

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--accents-2);

  // Temporary fix to some Next.js <Image /> component styling issues.
  // @see {@link https://github.com/vercel/next.js/issues/18915}
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;

  &.loading {
    @include loader.loading();

    &::before {
      content: '';
      display: block;
      padding-top: 100%;
    }
  }

  .photoWrapper {
    position: relative;
    padding-bottom: 100%;

    .photo {
      visibility: visible;
      position: absolute;
      padding: 0px;
      border: medium none;
      margin: auto;
      display: block;
      inset: 0px;
      width: 0px;
      height: 0px;
      min-width: 100%;
      max-width: 100%;
      min-height: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: center 50%;
    }
  }
}