@import '@/styles/_theme.scss';
//please note -- all !important are set to override vue-countdown npm package styling.
//custom breakpoints needed for timer

.container--countdown {
  display: flex;
  flex-direction: column;
  padding: 36px 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(112, 112, 112, 1) 100%);
  @media (min-width: 1063px) {
    padding: 36px 94px;
  }
}

.vuejs-countdown .text {
  @include carbon--type-style('productive-heading-06');
  text-transform: capitalize !important;
  font-size: 12px !important;

  @media (min-width: 1063px) {
    font-size: 20px !important;
  }
}

.vuejs-countdown .digit {
  font-size: 28px !important;

  @media (min-width: 1063px) {
    font-size: 48px !important;
  }
}

.vuejs-countdown li:after {
  top: 12px !important;
  right: -12px !important;
  font-size: 12px !important;

  @media (min-width: 1063px) {
    top: 24px !important;
    right: -15px !important;
    font-size: 20px !important;
  }
}

.vuejs-countdown {
  padding: 0;
  margin: 0 auto !important;
}
