tutorbookapp/tutorbook

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

$margin: 24px;

.title {
  @include typography.typography('headline6');
  margin: 0 0 15px;
  max-width: 600px;
}

.wrapper {
  position: relative;
  overflow-x: hidden;
  margin-top: $margin;
}

.left,
.right {
  @include elevation.elevation(4);
  position: absolute;
  border-radius: 100%;
  bottom: calc(50% - 24px);
  background: var(--background);
  color: var(--on-background);
  z-index: 2;
}

.left {
  left: 12px;
}

.right {
  right: 12px;
}

.scroller {
  display: flex;
  transition: 200ms right ease-in-out;
  position: relative;
}

.child {
  display: inline-block;
  margin-right: $margin;
  white-space: normal;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 100%;
  max-width: 450px;
}

.child:last-child {
  margin-right: 0;
}

@media (min-width: 700px) {
  .child {
    flex-basis: calc((100% - #{$margin}) / 2);
  }
}