/* Copied from Taste Library: app/frontend/styles/elementary/{buttons,inputs,overrides}.scss. Compiled as standalone CSS; no framework dependency. */
/* Elementary Button Styles */
/* Shared between browser extension and Rails app */
/* Uses CSS custom properties for runtime theming + SCSS for enhanced features */
.elementary-btn {
  --color: #171717;
  --color-transparency: 100%;
  --text-shadow-color: #000;
  --text-shadow-color-transparency: 100%;
  --border-color: rgba(0,0,0,.2);
  --border-color-transparency: 100%;
  --border-radius: 0.25em;
  --background-color: transparent;
  --background-color-transparency: 100%;
  --background-image: linear-gradient(180deg,hsla(0,0%,100%,.2),rgba(0,0,0,.05));
  --background-image: none;
  /* default */
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-text-decoration: none;
  appearance: none;
  background-image: var(--background-image);
  background-color: color-mix(in srgb, var(--background-color) var(--background-color-transparency), transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) var(--border-color-transparency), transparent);
  border-radius: var(--border-raidus);
  /* inset shadow: inner border around, top highlight, bottom shadow, outer shadow under */
  color: color-mix(in srgb, var(--color) var(--color-transparency), transparent);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px color-mix(in srgb, var(--text-shadow-color) var(--text-shadow-color-transparency), transparent);
  transition: all 0.1s ease-in;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.05), inset 0 1px 0 0 hsla(0, 0%, 100%, 0.45), inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  /* transition-colors */
  transition-property: text-shadow box-shadow color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  /* px-3 */
  padding-left: 0.75em;
  padding-right: 0.75em;
  /* py-1 */
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}
.elementary-btn:hover {
  --background-color: #f2f2f2;
  --background-color-change: 20%;
  background-color: color-mix(in srgb, var(--background-color) calc(var(--background-color-transparency) - var(--background-color-change)), transparent);
}
.elementary-btn:disabled, .elementary-btn[disabled=disabled] {
  cursor: not-allowed;
  --value: 20%;
  --color-transparency: var(--value);
  --text-shadow-color-transparency: var(--value);
  --background-color-transparency: var(--value);
  --border-color-transparency: var(--value);
}
.elementary-btn:disabled:hover, .elementary-btn[disabled=disabled]:hover {
  --background-color-change: 0%;
}
.elementary-btn:focus {
  /*border-color: rgba(77,156,209,.8);*/
  /*box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05),inset 0 1px 0 0 hsla(0,0%,100%,.45),inset 0 -1px 0 0 hsla(0,0%,100%,.15),0 3px 6px rgba(12,128,200,.16),0 3px 6px rgba(12,128,200,.23);*/
  -webkit-text-decoration: none;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.05), inset 0 1px 0 0 hsla(0, 0%, 100%, 0.45), inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.15), 0 3px 6px color-mix(in srgb, var(--background-color) 16%, transparent), 0 3px 6px color-mix(in srgb, var(--background-color) 23%, transparent);
  outline: none;
}
.elementary-btn:active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 0 hsla(0, 0%, 100%, 0.3);
}
.elementary-btn {
  /* white */
}
.elementary-btn.elementary-btn-white {
  --text-shadow-color: #fff;
}
.elementary-btn {
  /* tab trigger*/
}
.elementary-btn.elementary-btn-tab {
  --text-shadow-color: #fff;
}
.elementary-btn.elementary-btn-tab:not(:last-child) {
  border-right: 0;
}
.elementary-btn.elementary-btn-tab:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.elementary-btn.elementary-btn-tab:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.elementary-btn.elementary-btn-tab:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.elementary-btn.elementary-btn-tab:hover {
  --background-color: #eee;
}
.elementary-btn.elementary-btn-tab[data-state=active] {
  --background-color: #ccc;
  box-shadow: inset 0 1px 1px 0 #c6c6c6;
}
.elementary-btn.elementary-btn-tab[data-state=active]:hover {
  background-color: color-mix(in srgb, var(--background-color) calc(var(--background-color-transparency) + 0%), transparent);
}
.elementary-btn {
  /* Shared white text with dark shadow */
}
.elementary-btn.elementary-btn-deep-blue, .elementary-btn.elementary-btn-red, .elementary-btn.elementary-btn-dark, .elementary-btn.elementary-btn-orange, .elementary-btn.elementary-btn-purple, .elementary-btn.elementary-btn-green {
  --color: #fff;
  /*&:disabled {*/
  /*--color-transparency: 10%;*/
  /*--text-shadow-transparency: 10%;*/
  /*--background-color-transparency: 10%;*/
  /*--border-color-transparency: 10%;*/
  /*}*/
}
.elementary-btn {
  /* blue */
}
.elementary-btn.elementary-btn-blue {
  --background-color: #BEDCFF;
  --border-color: #75B3FF;
  --text-shadow-color: #fff;
}
.elementary-btn {
  /* deep-blue */
}
.elementary-btn.elementary-btn-deep-blue {
  --background-color: #3689e6;
  --border-color: #599de0;
}
.elementary-btn {
  /* grey */
}
.elementary-btn.elementary-btn-grey {
  --background-color: #d8d8d8;
  --text-shadow-color: #fff;
}
.elementary-btn {
  /* red */
}
.elementary-btn.elementary-btn-red {
  --background-color: #fd3742;
  --border-color: #c81e26;
}
.elementary-btn {
  /* link */
}
.elementary-btn.elementary-btn-link {
  --background-image: none;
  --border-color: transparent;
  --text-shadow-color: #fff;
  box-shadow: none;
}
.elementary-btn {
  /* dark */
}
.elementary-btn.elementary-btn-dark {
  --background-color: #485a6c;
}
.elementary-btn {
  /* yellow */
}
.elementary-btn.elementary-btn-yellow {
  --background-color: #f9c440;
  --text-shadow-color: #fff;
}
.elementary-btn {
  /* orange */
}
.elementary-btn.elementary-btn-orange {
  --background-color: #f37329;
}
.elementary-btn {
  /* purple */
}
.elementary-btn.elementary-btn-purple {
  --background-color: #7a36b1;
  /*box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.05),inset 0 1px 0 0 hsla(0,0%,100%,.45),inset 0 -1px 0 0 hsla(0,0%,100%,.15),0 3px 6px rgba(122,54,177,.16),0 3px 6px rgba(122,54,177,.23)*/
}
.elementary-btn {
  /* green */
}
.elementary-btn.elementary-btn-green {
  --background-color: #68b723;
}

/* Elementary Input Styles */
/*@apply w-full bg-white border border-gray-300 text-gray-900 px-4 py-2 rounded-xs focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50;*/
/* Shared between browser extension and Rails app */
/* Uses CSS custom properties for runtime theming + SCSS for enhanced features */
.elementary-text-field {
  --background-color: #ffffff;
  --border-color: #d1d5db; /* gray-300 */
  --text-color: #171717; /* gray-900 */
  --focus-ring-color: #59aef9; /* matching primary button blue */
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  height: 2.125em;
  /* Background and text */
  background-color: var(--background-color);
  color: var(--text-color);
  /* Border */
  border: 1px solid var(--border-color);
  border-radius: 0.125em; /* rounded-xs, matching buttons */
  background-clip: padding-box;
  /* Padding - px-4 py-2 */
  padding: 0.25em 0.5em;
  /* Focus state */
}
.elementary-text-field:focus {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 30%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.elementary-text-field {
  /* Disabled state */
}
.elementary-text-field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Taste Library browser fixes. Keep the copied Rica files above verbatim. */
.elementary-btn {
  border-radius: var(--border-radius);
  transition-property: color, background-color, border-color, box-shadow, text-shadow;
}