/* Imput Elements */

/* https://css-tricks.com/css-keyframe-animation-delay-iterations/
  Percent is shifted from 50% to 70% for better balance between showing and hiding the shimmering,
  because the gradient is centered, leaving empty space at left and right sides of the pseudo-element.
*/
@keyframes button-shimmering {
  from {
    transform: translate(100%, 10%);
  }
  70%,
  100% {
    transform: translate(-100%, 10%);
  }
}

.dctr-button {
  all: unset;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 1rem 1.5rem;

  font-family: var(--font-body);
  line-height: 130%;
  font-weight: 600;

  border-radius: 0.375rem; /* 6px */
  cursor: pointer;

  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.dctr-button:focus-visible {
  outline: var(--color-primary-inverse) auto 1px;
}

.dctr-button:hover:not(:disabled) {
  background-color: hsl(from var(--color-secondary-container) h s calc(l + 5));
}

.dctr-button:active {
  background-color: var(--color-secondary-container);
}

.dctr-button.small {
  padding: 0.625rem 1.125rem;
}

.dctr-button.primary {
  position: relative;
  overflow: hidden;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.dctr-button.primary:hover:not(:disabled) {
  background-color: hsl(from var(--color-primary) h s calc(l + 5));
}

.dctr-button.primary:active {
  background-color: var(--color-primary);
}

/*
  Animating with the pseudo-element to create a shimmering effect.
  Animating with the real elemnt would've been easier, but we can't afford it right now
  because we would have to change every button on the website to include aforementioned element.

  The shimmering effect on designs has fixed width and height, but we can't use fixed values here, because
  we have to use relative units in `translate` to make the effect go away from the button, and those relative units
  are relative to the animated element itself, not it's container. Therefore, since the button size is dynamic, we have to make the
  pseudoelement's size dynamic as well, or we wouldn't know when we moved the shimmering out of the button.
*/

.dctr-button.primary:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*
    Translate works fine if the shimmering is bigger than the button, so we can set min-width to make this look
    good on small buttons.
  */
  min-width: 200px;
  height: 300%;
  background: radial-gradient(ellipse 20% 55% at center, hsl(181, 77%, 85%), transparent);
  pointer-events: none;
  filter: blur(25px);
  animation: button-shimmering 2s infinite ease-in-out;
}

/* Use @supports to add in support for old syntax that requires % units to
  be specified in lightness calculations. This is required for Safari 16.4+
*/
@supports (color: hsl(from white h s calc(l + 5%))) {
  .dctr-button:hover:not(:disabled) {
    background-color: hsl(from var(--color-secondary-container) h s calc(l + 5%));
  }

  .dctr-button.primary:hover:not(:disabled) {
    background-color: hsl(from var(--color-primary) h s calc(l + 5%));
  }
}

/*
  There's a high chance that such buttons are only present on EHR pages, so this does not need to be a global style,
  yet the script that creates these is global, and runs on `$(document).ready`, and in theory
  such elements may be present anywhere, so I'll leave here for now.
*/
.add-entry-button {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  padding: 0.625rem 1.125rem;
  color: var(--color-primary);
  background-color: transparent;
  border-radius: 0.625rem;
  border: 1px dashed hsl(from var(--color-on-surface-container) h s l / 0.16);
}
.add-entry-button:active {
  opacity: 0.7;
}

/* TODO: this should be scoped to EHR pages only */
.ehr-entry-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;

  margin-top: 1rem;
}
.ehr-entry-controls button {
  width: 100%;
}
.ehr-entry-controls button.delete-record-button {
  --color-secondary-container: var(--color-red);
  --color-on-secondary-container: var(--color-on-primary);
}

/* TODO: Bootstrap holdovers */

.alert {
  --bs-alert-color: inherit;
  --bs-alert-bg: transparent;
  --bs-alert-border-color: transparent;

  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: 1px solid var(--bs-alert-border-color);
  border-radius: 0.375rem;
}

.alert-warning {
  width: 100%;
  max-width: 43.25rem;
  --bs-alert-color: #664c05;
  --bs-alert-bg: #fff3cd;
  --bs-alert-border-color: #ffe69c;
}

.alert-danger {
  --bs-alert-color: #58151c;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f1aeb5;
}

.alert-success {
  --bs-alert-color: #0a3622;
  --bs-alert-bg: #d1e7dd;
  --bs-alert-border-color: #a3cfbb;
}