@use 'src/styles/colors' as *;
@use 'src/styles/fonts' as *;
@use 'src/styles/screen' as *;

:host {
  // prevents component from growing in height due to font-size inheritance
  font-size: 0;
}

.captioned-time-group {
  display: inline-flex;
  flex-direction: column;

  &__caption {
    margin-bottom: 2px;
  }
}

.captioned-time-group--right {
  align-items: flex-end;
}

.captioned-time-group--mobile-right {
  @include mobile {
    align-items: flex-end;
  }
}

.captioned-time-group--mobile-left {
  @include gt-mobile {
    align-items: flex-end;
  }
}
