.rewind-callout {
  background: var(--primary);
  padding: 12px;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 12px);
  border-radius: var(--d-border-radius);
  height: calc(100% - 12px);
  margin: 0 auto;
  box-shadow: 0 0 0 6px var(--primary);
  transition: box-shadow;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  .rewind-logo {
    height: 30px;
  }

  &:hover,
  &:focus {
    background: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--d-blue), 1),
      0 0 0 4px rgba(var(--d-green), 1), 0 0 0 6px rgba(var(--d-orange), 1),
      0 0 0 8px rgba(var(--d-red), 1);
    @if color-scheme-is-light {
      box-shadow: 0 0 0 2px rgba(var(--d-blue-dark), 1),
        0 0 0 4px rgba(var(--d-green-dark), 1),
        0 0 0 6px rgba(var(--d-orange-dark), 1),
        0 0 0 8px rgba(var(--d-red-dark), 1);
    }
  }
}