@import "@fontsource/fira-mono";

@tailwind base;

@tailwind components;

@tailwind utilities;

a {
  @apply text-colorLink hover:text-colorLinkHover active:text-colorLinkActive;
}

.changelog-link {
  @apply underline;
}

.btn {
  @apply shadow-colorNeutralSofter text-colorText border-colorNeutral rounded-md
    border p-1 text-base shadow-md hover:shadow-none active:shadow-none md:text-lg;
}

.btn:disabled {
  cursor: unset;
  @apply text-colorNeutral bg-colorBackground border-colorNeutralSofter
    shadow-none;
}

.btn-icon {
  @apply fill-colorTextSoft flex h-9 w-9 items-center justify-center rounded
    hover:border hover:border-colorNeutralSoft active:shadow-none;
}

.btn-dropdown-menu {
  @apply text-colorText bg-colorCardB fill-colorTextSofter z-30 flex items-center
    justify-between gap-1 rounded-md border-2 border-transparent p-1 shadow-md
    hover:border-2 hover:border-colorTextSofter active:shadow-none;
}

.btn-menu-item {
  @apply text-colorText bg-colorCardB fill-colorTextSoft flex items-center
    justify-center gap-1 border-2 border-transparent p-1 hover:border-2
    hover:border-colorTextSofter hover:!bg-colorBackground;
}

.btn-settings {
  @apply text-colorText bg-colorCardB fill-colorTextSoft flex items-center
    justify-center gap-1 rounded-md border-2 border-transparent p-1 hover:border-2
    hover:border-colorText;
}

.btn-toolbar {
  @apply bg-colorCardB flex flex-row items-center justify-center rounded-md;
}

.btn-svg {
  @apply md:w-8;
}

.showBtn {
  opacity: 1 !important;
  display: block;
  transform: translateY(0);
}

.menu-link {
  @apply text-colorText [&:nth-child(odd)]:bg-colorCardA
    [&:nth-child(even)]:bg-colorCardB flex justify-center gap-2 p-2;
}

.only-md {
  @apply hidden md:block;
}

.divider {
  @apply border-colorNeutral border-t;
}

button:disabled:hover {
  transform: unset;
}

button:disabled:active {
  transform: unset;
}

label {
  @apply text-base;
}

input {
  @apply m-2;
}

input[type="number"],
input[type="text"],
textarea {
  @apply font-mono bg-colorBackground border-colorNeutral rounded border p-2
    text-xs placeholder:text-colorTextSofter sm:text-sm;
}

textarea {
  @apply min-h-10 m-2 max-h-32 resize-y;
}

table {
  @apply my-2 w-full border-spacing-4 border-none p-1 shadow;
}

tr {
  @apply [&:nth-child(odd)]:bg-colorCardB [&:nth-child(even)]:bg-colorCardA;
}

td {
  @apply border-none p-2 text-sm md:text-base;
}

.bevel {
  /* 3D bevel effect */
  border: 2px solid;
  border-color: theme('colors.colorTextSoftest') theme('colors.colorTextSoft') theme('colors.colorTextSoft') theme('colors.colorTextSoftest');
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

@layer components {
  .cardComponent {
    background-color: var(--color-white);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-xl);
  }
  
  .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .grid-cols-var {
    grid-template-columns: repeat(var(--num-columns), minmax(0, 1fr));
  }
}