.aswc {
  --aswc-card-background: linear-gradient(145deg, #fff 0%, #f1f1f6 100%);
  --aswc-card-border: rgb(0 0 0 / 6%);
  --aswc-label-color: #1c1c1e;
  --aswc-secondary-color: #6e6e73;

  display: block;
  width: 100%;
  max-width: 380px;
  min-height: 166px;
  box-sizing: border-box;
  padding: 12px 10px 10px;
  overflow: hidden;
  border: 1px solid var(--aswc-card-border);
  border-radius: 28px;
  background: var(--aswc-card-background);
  box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
  color: var(--aswc-label-color);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.aswc *,
.aswc *::before,
.aswc *::after {
  box-sizing: border-box;
}

.aswc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  min-height: 142px;
}

.aswc__clock {
  min-width: 0;
  padding: 8px 10px 4px;
  text-align: center;
}

.aswc__dial {
  --aswc-dial-background: #fff;
  --aswc-dial-border: rgb(0 0 0 / 6%);
  --aswc-dial-text: #343436;

  position: relative;
  width: 100%;
  max-width: 116px;
  aspect-ratio: 1;
  margin: 0 auto 4px;
  overflow: hidden;
  border: 1px solid var(--aswc-dial-border);
  border-radius: 50%;
  background: var(--aswc-dial-background);
  box-shadow: 0 5px 14px rgb(0 0 0 / 8%);
  color: var(--aswc-dial-text);
}

.aswc__dial.is-night {
  --aswc-dial-background: #343436;
  --aswc-dial-border: rgb(255 255 255 / 8%);
  --aswc-dial-text: #fff;
}

.aswc__numbers,
.aswc__numbers > i {
  position: absolute;
  inset: 0;
}

.aswc__numbers > i {
  font-style: normal;
  transform: rotate(var(--aswc-angle));
}

.aswc__numbers > i > span {
  position: absolute;
  top: 2.6%;
  left: 50%;
  display: block;
  min-width: 1.7em;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transform:
    translateX(-50%) rotate(var(--aswc-angle-inverse)) scale(0.8);
}

.aswc__hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(var(--aswc-rotation, 0deg));
  transform-origin: bottom center;
}

.aswc__hand--hour {
  height: 26%;
}

.aswc__hand--minute {
  height: 36%;
}

.aswc__hand--second {
  width: 1px;
  height: 44%;
  margin-left: -0.5px;
  background: #fb7e01;
}

.aswc__centre {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 2px solid var(--aswc-dial-background);
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.aswc__label,
.aswc__difference {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aswc__label {
  color: var(--aswc-label-color);
  font-weight: 600;
}

.aswc__difference {
  position: relative;
  top: -3px;
  color: var(--aswc-secondary-color);
  transform: scale(0.92);
}

.aswc[data-theme="dark"] {
  --aswc-card-background: linear-gradient(145deg, #3a3a3c 0%, #242426 100%);
  --aswc-card-border: rgb(255 255 255 / 9%);
  --aswc-label-color: rgb(255 255 255 / 92%);
  --aswc-secondary-color: rgb(255 255 255 / 68%);
}

@media (prefers-color-scheme: dark) {
  .aswc:not([data-theme="light"]) {
    --aswc-card-background:
      linear-gradient(145deg, #3a3a3c 0%, #242426 100%);
    --aswc-card-border: rgb(255 255 255 / 9%);
    --aswc-label-color: rgb(255 255 255 / 92%);
    --aswc-secondary-color: rgb(255 255 255 / 68%);
  }
}

@media (max-width: 320px) {
  .aswc {
    min-height: 148px;
    padding: 9px 6px 7px;
    border-radius: 22px;
  }

  .aswc__list {
    min-height: 130px;
  }

  .aswc__clock {
    padding: 6px 6px 2px;
  }

  .aswc__dial {
    max-width: 96px;
  }

  .aswc__numbers > i > span,
  .aswc__label,
  .aswc__difference {
    font-size: 11px;
  }
}