@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-white dark:bg-neutral-950 cursor-default;
}

:root {
  --slider-rail: #ffd9e2;
}

.dark {
  --slider-rail: #404040;
}

.titlebar {
  height: 30px;
  background: #171717;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.titlebar-button:hover {
  background: #404040;
}

.button {
  @apply transition uppercase font-bold flex gap-1 items-center justify-center;
}

.button-normal {
  @apply bg-neutral-100 hover:bg-neutral-200 text-neutral-900 active:bg-neutral-300
  dark:bg-neutral-800 dark:text-neutral-100
  dark:hover:bg-neutral-700 dark:active:bg-neutral-600;
}

.toolbar .button-normal {
  @apply dark:bg-neutral-900;
}

.button-primary {
  @apply bg-hoa-1100 hover:bg-hoa-1200 text-white active:bg-hoa-1300;
}

.button-secondary {
  @apply bg-neutral-100 text-neutral-700 hover:bg-neutral-200 active:bg-neutral-300
  dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700;
}

.button-working {
  @apply bg-neutral-100 hover:bg-neutral-200 text-neutral-900 active:bg-neutral-300
  dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700;
}

.button-disabled {
  @apply box-border border-2 border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800 text-neutral-400 dark:text-neutral-600 cursor-not-allowed;
}

.button-blend {
  @apply hover:bg-neutral-100 text-neutral-900 active:bg-neutral-200
  dark:hover:bg-neutral-800 dark:text-neutral-100;
}

.button-done {
  @apply bg-green-100 hover:bg-green-200 text-green-800 active:bg-green-800 active:text-white;
}

.button-tiny {
  @apply text-neutral-600 hover:bg-neutral-200 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100 rounded p-2 transition;
}

.link {
  @apply text-hoa-1200 dark:text-hoa-400 hover:text-hoa-1300 hover:dark:text-hoa-300 transition text-sm;
}

.group-label {
  @apply font-bold text-neutral-900 dark:text-neutral-100 block;
}

.child-label {
  @apply text-sm text-neutral-500 dark:text-neutral-400;
}

.input {
  @apply bg-white box-border border border-neutral-300 focus:border-hoa-1100 outline-none
  text-sm rounded-full transition text-neutral-900 placeholder:text-neutral-400
  dark:bg-neutral-900 dark:border-neutral-700 dark:focus:border-hoa-1100 dark:text-neutral-100
  dark:placeholder:text-neutral-600;
}

.modal-content .input {
  @apply dark:bg-neutral-800;
}

.textarea {
  @apply bg-white box-border border border-neutral-300 focus:border-hoa-1100 outline-none
  text-sm rounded-lg transition text-neutral-900 placeholder:text-neutral-400 resize-none
  dark:bg-neutral-900 dark:border-neutral-700 dark:focus:border-hoa-1100 dark:text-neutral-100
  dark:placeholder:text-neutral-600;
}

.modal-content .textarea {
  @apply dark:bg-neutral-800;
}

.modal-content {
  @apply rounded-lg bg-white dark:bg-neutral-900 flex flex-col m-2 select-none text-neutral-900 dark:text-neutral-100;
  overscroll-behavior: contain;
}

.Vue-Toastification__toast.lrcget-toast {
  padding: 12px 24px !important;
  min-width: auto !important;
  min-height: auto !important;
}

/* Applied to the toast body when using regular strings as content */
.Vue-Toastification__toast-body.toast-body-1 {
  font-size: 12px;
}

/* Applied to a wrapper div when using a custom component as content */
.Vue-Toastification__toast-component-body.toast-body-2 {
}

.slide-fade-enter-active {
  transition: all 0.2s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100px);
  opacity: 0;
}

.pop-fade-enter-from,
.pop-fade-leave-to {
  opacity: 0;
  transform: scale(0.7);
}

.pop-fade-enter-to,
.pop-fade-leave-from {
  opacity: 1;
  transform: scale(1);
}

.pop-fade-enter-active,
.pop-fade-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.v-popper--theme-lrcget-tooltip .v-popper__inner {
  background: #f35697;
  color: #ffffff;
}

.v-popper--theme-lrcget-tooltip .v-popper__arrow-outer {
  border-color: #f35697;
}

.v-popper--theme-lrcget-dropdown .v-popper__inner {
  @apply bg-white dark:bg-neutral-800 rounded shadow-lg shadow-neutral-900/10 dark:shadow-black/50;
}

.v-popper--theme-lrcget-dropdown .v-popper__arrow-outer {
  visibility: hidden;
}

.codemirror-custom .cm-editor {
  @apply outline-none h-full cursor-text;
}

.codemirror-custom .cm-cursor {
  @apply border-hoa-1100 dark:border-hoa-400 border-r-[1.2px];
}

.codemirror-custom .cm-current-lyrics {
  @apply font-bold;
}

.codemirror-custom .cm-content {
  /* Some padding to prevent the text from touching the edge,
  the gutter calculates its width internally so it's hard to calculate exactly */
  @apply max-w-[90%];
}

.codemirror-custom .cm-line {
  /* Text folding */
  @apply text-neutral-900 dark:text-neutral-100 break-words whitespace-pre-wrap w-full;
}

.codemirror-custom .cm-activeLine {
  @apply bg-hoa-200/30 dark:bg-hoa-900/30;
}

.codemirror-custom .cm-activeLineGutter {
  @apply bg-hoa-200/30 dark:bg-hoa-900/30;
}

.codemirror-custom .cm-gutters {
  @apply bg-neutral-100 dark:bg-neutral-800 text-neutral-500 border-r border-neutral-200 dark:border-neutral-700;
}

.secondary-page {
  @apply absolute top-0 left-0 w-full h-full bg-white p-4 shadow-lg overflow-y-auto dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100;
}

.secondary-page-back-button {
  @apply button button-normal transition rounded-full p-4;
}
