/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body.admin-theme-light .cover-star-selected {
  color: #d97706;
  background-color: rgb(251 191 36 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.75);
}

body.admin-theme-dark .cover-star-selected {
  color: #fcd34d;
  background-color: rgb(252 211 77 / 0.24);
  box-shadow: inset 0 0 0 1px rgb(252 211 77 / 0.9);
}

body.admin-theme-light .homepage-carousel-toggle-selected {
  color: #4338ca;
  background-color: rgb(129 140 248 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.75);
}

body.admin-theme-dark .homepage-carousel-toggle-selected {
  color: #c4b5fd;
  background-color: rgb(167 139 250 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(196 181 253 / 0.75);
}

input[type="checkbox"].form-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(51 65 85);
  background-color: rgb(15 23 42);
  background-image: radial-gradient(circle 0.56rem at 0.72rem 50%, rgb(226 232 240) 98%, transparent 100%);
  background-repeat: no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    background-image 200ms ease;
}

input[type="checkbox"].form-toggle:checked {
  border-color: rgb(54 69 84);
  background-color: rgb(75 93 112);
  background-image: radial-gradient(circle 0.56rem at calc(100% - 0.72rem) 50%, #fff 98%, transparent 100%);
}

input[type="checkbox"].form-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(75 93 112 / 0.45);
}

body.admin-theme-light input[type="checkbox"].form-toggle {
  border-color: rgb(148 163 184);
  background-color: rgb(226 232 240);
  background-image: radial-gradient(circle 0.56rem at 0.72rem 50%, #fff 98%, transparent 100%);
}

body.admin-theme-light input[type="checkbox"].form-toggle:checked {
  border-color: rgb(54 69 84);
  background-color: rgb(75 93 112);
  background-image: radial-gradient(circle 0.56rem at calc(100% - 0.72rem) 50%, #fff 98%, transparent 100%);
}