@import 'scss/variables';

.clock {
  font-size: 4em;
  margin: 0;
  cursor: initial;
  user-select: none;
  font-weight: 600;
  --shadow-shift: 0.4rem;
}

.ampm {
  font-size: 0.5em;
}

.analogclock,
.react-clock__face {
  margin: 0 auto;
  border-radius: 100%;
  /*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);*/
  border: none !important;

  @include themed() {
    border: 1px solid t($color) !important;
  }

  cursor: initial;
  user-select: none;
}

.react-clock__hand__body,
.react-clock__mark__body {
  @include themed() {
    background: t($color) !important;
  }
  /*box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);*/
}

.clockBackground {
  @extend %basic;
  padding: 1rem;

  &.round {
    border-radius: 100% !important;
  }
}

.new-clock {
  line-height: 100%;
  .seconds {
    font-size: 0.2em;
    line-height: 0%;
  }
}