@value slate-padding-small from '../lib/definitions.module.css';
@value slate-padding-med from '../lib/definitions.module.css';
@value slate-padding-large from '../lib/definitions.module.css';
@value small-and-up from '../lib/definitions.module.css';
@value large-and-up from '../lib/definitions.module.css';

.bigButton {
  width: 100%;
  height: 85px;
  color: white;
  background-color: var(--primary);
}

.bigButton[data-radius='4'] {
  border-radius: 4px 4px 0 0;
}

.bigButton[data-radius='7'] {
  border-radius: 7px 7px 0 0;
}

.bigButton:hover {
  background-color: var(--slate-primary-hover);
}

.beginContainer {
  overflow: hidden;

  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  padding: slate-padding-small 0 0;
  border: 1px solid var(--slate-container-border);
  border-radius: 4px;

  color: var(--slate-subtitle);
  text-align: center;

  background-color: var(--bg);
}

.poweredBy {
  font-size: 0.9rem;
  color: var(--slate-subtitle);
  text-transform: uppercase;
  letter-spacing: 1.36px;
}

.poweredBy:hover {
  color: var(--slate-subtitle);
}

.logo {
  margin-bottom: 1rem;
}

.poweredByWrap {
  margin-bottom: 2rem;
  text-align: center;
}

.pauseIcon {
  display: block;
  margin: auto;
  font-size: 4rem;
  opacity: 0.3;
}

.pauseText {
  margin: 2rem 0 2.82rem;

  font-size: 1.383rem;
  font-weight: bold;
  color: var(--slate-title);
  text-align: center;
}

.illustration {
  font-size: 10rem;
  color: var(--slate-button-text);
  opacity: 0.3;
}

.poweredByWrap2 {
  margin: 2rem 0;
  text-align: center;
}

.buttonPlaceholder {
  height: 85px;
}

.playIcon {
  margin-right: 1rem;
  font-size: 35px;
}

.buttonText {
  font-size: 1.383rem;
  font-weight: bold;
  vertical-align: middle;
}

/* stylelint-disable-next-line media-feature-name-no-unknown */
@media (small-and-up) {
  .beginContainer {
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    padding: slate-padding-med 0 0;
  }
}

/* stylelint-disable-next-line media-feature-name-no-unknown */
@media (large-and-up) {
  .beginContainer {
    /* stylelint-disable-next-line declaration-property-value-no-unknown */
    padding: slate-padding-large 0 0;
  }
}
