/* ==========================================================================
 * Stopwatch
 * ========================================================================== */

.mds-c-stopwatches {
  display: grid;
  grid-gap: var(--mds-d-spacing--lg);
  grid-template-columns: 1fr 1fr 1fr;

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xl);
  }
}

.mds-c-stopwatch {
  height: 100%;
  position: relative;
  width: 100%;

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

  > .mds-c-progress-circle {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
}

.mds-c-stopwatch__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.mds-c-stopwatch__icon {
  color: var(--mds-t-text-color--secondary);
  font-size: var(--mds-d-font-size--xl);
  line-height: 0;
  margin-top: calc(var(--mds-d-spacing--xl) * -2);
  position: absolute;
}

.mds-c-stopwatch__label {
  @mixin mds-m-text--size-sm;
  @mixin mds-m-text-overflow-ellipsis;

  color: var(--mds-t-text-color--secondary);
  margin-top: calc(var(--mds-d-spacing--xs) * -1);
}

.mds-c-stopwatch__title {
  @mixin mds-m-heading--size-xxl;
  @mixin mds-m-text-overflow-ellipsis;
}

.mds-c-stopwatch__subtitle {
  @mixin mds-m-text--size-sm;
  @mixin mds-m-text-overflow-ellipsis;

  color: var(--mds-t-text-color--secondary);
  margin-top: var(--mds-d-spacing--xxs);
}