@import "./card-colors.css";

:root {
  --card-bg-color: color-mix(in srgb, #ebebed 99%, var(--accent-color));

  --list-border-radius: 9px;
  --list-border: inset 0 0 0 1px
    rgb(from var(--border-color) r g b / calc(alpha * 0.35));
  --list-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.055);

  --cubic-bezier: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --background-transition: background 200ms var(--cubic-bezier);
}

.scrollbar-visible > scrollbar.vertical:dir(ltr),
preferencespage scrolledwindow > scrollbar.vertical:dir(ltr) {
  margin-left: -11px;
}
.scrollbar-visible > scrollbar.vertical:dir(rtl),
preferencespage scrolledwindow > scrollbar.vertical:dir(rtl) {
  margin-right: -11px;
}

#medication-dialog row#delete {
  --list-border: inset 0 0 0 1px
    rgb(from var(--card-fg-color) r g b / calc(alpha * 0.043));
}

statuspage .icon {
  margin-top: -30px;
}
statuspage .title {
  margin-bottom: 32px;
}

#preferences scrolledwindow viewport clamp {
  margin-top: -26px;
  margin-bottom: -6px;
}

dialog.about .boxed-list,
#edit-hist-dialog .boxed-list {
  box-shadow: var(--list-border), var(--list-shadow);
  border-radius: var(--list-border-radius);
}
dialog.about .main-page box.vertical {
  border-spacing: 5px;
}
dialog.about sheet scrolledwindow clamp {
  padding: 0 3px;
}

item-box {
  box-shadow: var(--list-border), var(--list-shadow);
  border-radius: var(--list-border-radius);
  min-height: 46px;
  padding: 5px 0;
}
item-box label.title:first-child {
  margin-top: -4px;
}
item-box label.subtitle:last-child {
  margin-bottom: -4px;
}

.dosage-list > row item-box {
  transition: var(--background-transition);
}
.dosage-list > row:hover item-box {
  background-image: image(color-mix(in srgb, currentColor 3%, transparent));
}
.dosage-list > row:active item-box {
  background-image: image(color-mix(in srgb, currentColor 8%, transparent));
}

.card-stripe:dir(ltr) {
  box-shadow: var(--list-border), var(--list-shadow),
    inset 23px 0 0 -20px rgb(from currentColor r g b / calc(alpha * 0.3));
}
.card-stripe:dir(rtl) {
  box-shadow: var(--list-border), var(--list-shadow),
    inset -23px 0 0 -20px rgb(from currentColor r g b / calc(alpha * 0.3));
}
.card-stripe-w-n:dir(ltr) {
  box-shadow: var(--list-border), var(--list-shadow),
    inset 23px 0 0 -20px rgb(from currentColor r g b / calc(alpha * 0.13));
}
.card-stripe-w-n:dir(rtl) {
  box-shadow: var(--list-border), var(--list-shadow),
    inset -23px 0 0 -20px rgb(from currentColor r g b / calc(alpha * 0.13));
}

.dosage-list > header {
  padding: 2px;
  padding-top: 14px;
  padding-bottom: 0px;
  min-height: 21px;
}
.dosage-list > header,
.dosage-list > row {
  margin-left: 10px;
  margin-right: 10px;
}
.dosage-list > row {
  border-radius: calc(var(--list-border-radius) + 2px);
  background: none;
}
.dosage-list {
  background-color: transparent;
  padding-bottom: 69px;
}
.list-no-extra-padding-bottom {
  padding-bottom: 20px;
}
row.expander row.spin:focus-within {
  outline: 2px solid rgb(from var(--accent-color) r g b / calc(alpha * 0.5));
  outline-offset: -2px;
}
list.boxed-list > row:first-child,
list.boxed-list-separate > row.expander row.header {
  border-top-left-radius: var(--list-border-radius);
  border-top-right-radius: var(--list-border-radius);
}
list.boxed-list > row:last-child {
  border-bottom-left-radius: var(--list-border-radius);
  border-bottom-right-radius: var(--list-border-radius);
}
list.boxed-list-separate > row.expander:not(:checked) row.header,
list.boxed-list-separate > row.expander.expander:checked list.nested,
list.boxed-list-separate
  > row.expander.expander:checked
  list.nested
  > row:last-child {
  border-bottom-left-radius: var(--list-border-radius);
  border-bottom-right-radius: var(--list-border-radius);
}
.boxed-list-separate > row {
  box-shadow: var(--list-border), var(--list-shadow);
  border-radius: var(--list-border-radius);
  margin: 2px 0;
}
.boxed-list {
  box-shadow: var(--list-border), var(--list-shadow);
  border-radius: var(--list-border-radius);
  margin: 2px 0;
}
button.specific-day {
  min-width: 40px;
  padding-left: 1px;
  padding-right: 1px;
}
.popover-scrolled > contents scrollbar.vertical > range > trough > slider {
  min-height: 16px;
}
.one-time-menu popover contents:dir(ltr) {
  padding: 6px;
  padding-right: 0;
}
.one-time-menu popover contents:dir(rtl) {
  padding: 6px;
  padding-left: 0;
}
button.arrow-button,
button.one-time-name {
  font-weight: 400;
}
row.combo popover > contents listview row {
  padding-top: 8px;
  padding-bottom: 8px;
}
#medication-dialog.one-time .time > .arrow-button {
  margin-left: -6px;
}
row.combo .dropdown-arrow {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.1));
  min-height: 34px;
  padding: 0 9px;
  border-radius: 99px;
  transition: var(--background-transition);
}
row.combo .dropdown-arrow:hover {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.15));
}

/*
When using ListView.scroll_to(0) the view will scroll
to the first item instead of the first header.
The same thing happens in today list when confirming
so use this little hack to scroll to header instead
*/
listview.scroll-to-top-hack > :nth-child(1) {
  margin-bottom: -35px;
}
listview.scroll-to-top-hack > :nth-child(2) {
  margin-top: 35px;
}

time-group-selection {
  transition: all 200ms var(--cubic-bezier);
  min-height: 21px;
  padding: 0 2px;
  margin: 0 -2px 0px;
  background-size: 0.75em;
  background-repeat: no-repeat;
}
time-group-selection label {
  text-decoration: underline;
  text-decoration-color: var(--window-bg-color);
  transition: 200ms var(--cubic-bezier);
}
time-group-selection:hover label {
  text-decoration: underline;
  color: currentColor;
}
time-group-selection:active label {
  text-decoration: underline;
  color: rgb(from currentColor r g b / calc(alpha * 0.65));
  transition: none;
}
time-group-selection:dir(ltr) {
  background-position: 92% 50%;
}
time-group-selection:dir(rtl) {
  background-position: 6% 50%;
}
time-group-selection:hover:dir(ltr) {
  padding-right: 1.25em;
}
time-group-selection:hover:dir(rtl) {
  padding-left: 1.25em;
}
time-group-selection:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23823a5f' d='m14.983 3.5-1-1-7.469 7.516L3.1 6.539l-2 2 5.414 5.477L15.983 4.5z' style='fill:%232f2f34'/%3E%3C/svg%3E");
}

.t-d-row box.suffixes > spinbutton > text:dir(ltr) {
  margin-left: -18px;
}
.t-d-row box.suffixes > spinbutton > text:dir(rtl) {
  margin-right: -18px;
}

time-picker button {
  border-radius: 99px;
  padding: 3px;
}
time-picker time-spinbutton text {
  padding: 6px 0px;
  margin: 2px;
}

.today-amount > button {
  min-width: 30px;
  min-height: 30px;
}
.spin-box row.spin {
  outline: none;
}
.spin-box > row.spin > box {
  margin: -4px 4px;
}
.spin-box:dir(ltr) > row.spin > box {
  margin-left: 10px;
}
.spin-box:dir(rtl) > row.spin > box {
  margin-right: 10px;
}
.spin-today-amount:dir(ltr) > row.spin > box {
  margin-left: -16px;
}
.spin-today-amount:dir(rtl) > row.spin > box {
  margin-right: -16px;
}

badge-box label,
badge-button label {
  padding: 5px 8px;
}
badge-box,
badge-button {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.1));
  border-radius: 99px;
  font-weight: 550;
  font-size: 0.9016em;
}
badge-icon {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.1));
  padding: 0 5px;
}
badge-icon:dir(ltr) {
  border-top-right-radius: 99px;
  border-bottom-right-radius: 99px;
  padding-left: 4px;
  margin-left: -4px;
}
badge-icon:dir(rtl) {
  border-top-left-radius: 99px;
  border-bottom-left-radius: 99px;
  padding-right: 4px;
  margin-right: -4px;
}
badge-button label {
  text-transform: capitalize;
}
badge-button {
  transition: var(--background-transition);
}
badge-button:hover {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.15));
}
badge-button:active {
  background-color: rgb(from currentColor r g b / calc(alpha * 0.2));
}
badge-button.low-stock {
  box-shadow: inset 0 0 0 1px rgb(from currentColor r g b / calc(alpha * 0.2));
  color: currentColor;
}

button.secondary.floating {
  padding-left: 10px;
  padding-right: 10px;
}
button.floating.secondary image {
  min-width: 1.2em;
}
button.floating {
  box-shadow: 0 0 0 1px rgba(90, 90, 90, 0.1),
    0 1px 2px 1px rgba(90, 90, 90, 0.1);
  margin: 10px 4px;
}
button.floating:hover {
  box-shadow: 0 0 0 1px rgba(90, 90, 90, 0.15),
    0 1px 2px 1px rgba(90, 90, 90, 0.15);
}
button.floating:not(.suggested-action) {
  background-color: color-mix(in srgb, #ebebed 99%, var(--accent-color));
}
button.floating:not(.suggested-action):hover {
  background-color: color-mix(in srgb, #e3e3e5 99%, var(--accent-color));
}
button.floating:not(.suggested-action):active {
  background-color: color-mix(in srgb, #dadadc 99%, var(--accent-color));
}
button.floating.destructive-action {
  background-color: #f2d5d5;
}
button.floating.destructive-action:hover {
  background-color: #efc8c9;
}
button.floating.destructive-action:active {
  background-color: #e7a3a3;
}

#medication-dialog headerbar button,
#edit-hist-dialog headerbar button {
  min-width: 56px;
}

.popover-calendar contents {
  padding: 1px;
}
calendar {
  padding: 5px 4px;
  border-color: transparent;
  background-color: transparent;
}
calendar button,
calendar .day-number {
  border-radius: 99px;
}
calendar button,
calendar .month,
calendar .year {
  margin-bottom: 5px;
  margin-top: -1px;
}
calendar .month label,
calendar .year,
calendar .day-name {
  font-weight: bold;
  text-transform: capitalize;
}
calendar .day-name {
  opacity: 0.5;
}
calendar .day-number {
  border-radius: 99px;
  padding: 2px 0;
  min-width: 28px;
  min-height: 28px;
}
.calendar-error {
  border-radius: 14px;
  animation: flashCalendar 0.8s;
}
@keyframes flashCalendar {
  10% {
    background-color: rgb(
      from var(--error-bg-color) r g b / calc(alpha * 0.33)
    );
  }
}
