@config "../../tailwind.application.config.js";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

* {
  font-family: 'Roboto', sans-serif;
}

a[href],
input[type='checkbox'],
input[type='submit'],
input[type='image'],
input[type='radio'],
label[for],
select,
button {
  cursor: pointer;
}

button .disabled {
  display: none;
}

button[disabled] .disabled {
  display: initial;
}

button .enabled {
  display: initial;
}

button[disabled] .enabled {
  display: none;
}

.input-bordered {
  @apply border-base-content/20;
}

.select-bordered {
  @apply border-base-content/20;
}

.textarea-bordered {
  @apply border-base-content/20;
}

.btn {
  @apply no-animation;
  height: 2.3rem;
  min-height: 2.3rem;
  text-transform: none;
  font-weight: 400;
}

.base-input {
  @apply input input-bordered bg-white;
}

.base-textarea {
  @apply textarea textarea-bordered bg-white rounded-3xl;
}

.base-button {
  @apply btn btn-outline text-sm;
  border-color: #004FCC;
  color: #004FCC;
  padding: 6px 12px;
}

.primary-button {
  @apply btn btn-primary text-white text-sm;
  padding: 6px 12px;
}

label.primary-button {
  padding: 10px;
}

.btn-outline {
  border-color: #004FCC;
  color: #004FCC;
}

.btn-outline:hover {
  background-color: #004FCC;
  border-color: #004FCC;
  color: white;
}

.btn-ghost {
  color: #004FCC;
}

.btn-ghost:hover {
  background-color: #004FCC;
  color: white;
}

.btn-neutral {
  background-color: #004FCC;
  border-color: #004FCC;
  color: white;
}

.btn-neutral:hover {
  background-color: #0063FF;
  border-color: #0063FF;
  color: white;
}

.white-button {
  @apply btn btn-outline text-base bg-white border-2;
  border-color: #004FCC;
  color: #004FCC;
}

.base-checkbox {
  @apply checkbox rounded bg-white checkbox-sm no-animation;
}

.base-radio {
  @apply radio bg-white radio-sm no-animation;
}

.base-select {
  @apply select base-input w-full font-normal;
}

:root {
  --tooltip-color: black;
}

.tooltip-bottom-end:before {
  transform: translateX(-95%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-pre:before {
  white-space: pre;
  text-align: left;
}

.tooltip-bottom-end:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:before {
  transform: translateX(-31%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.autocomplete {
  background: white;
  z-index: 1000;
  font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: auto;
  box-sizing: border-box;
  @apply border border-base-300 mt-1 rounded-md;
}

.autocomplete * {
  font: inherit;
}

.autocomplete > div {
  @apply px-2 py-1.5 font-normal;
}

.autocomplete .group {
  background: #eee;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  @apply bg-base-300;
  cursor: pointer;
}

.input-outlined {
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: hsl(var(--bc) / 0.2);
}