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

html {
  @apply scroll-smooth;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

@property --grid-color-start {
  syntax: "<color>";
  initial-value: theme("colors.blue.50/10");
  inherits: false;
}

@property --grid-color-end {
  syntax: "<color>";
  initial-value: theme("colors.blue.50/100");
  inherits: false;
}

.grid-card {
  background-image: linear-gradient(
    to top right,
    var(--grid-color-start),
    var(--grid-color-end)
  );
  transition:
    --grid-color-start 300ms cubic-bezier(0.4, 0, 0.2, 1),
    --grid-color-end 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .grid-card {
  --grid-color-start: theme("colors.blue.100/50");
  --grid-color-end: theme("colors.blue.50/50");
}

video::-webkit-media-controls {
  display: none !important;
}

.hg-theme-default {
  @apply !font-display font-normal;
}

.hg-theme-default .hg-button {
  @apply border !border-b border-slate-800/25 !border-b-slate-800/25 !shadow-sm;
}

.hg-theme-default .hg-button span {
  @apply truncate;
}

.keyboardContainer {
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  justify-content: center;
  width: 1024px;
  margin: 0 auto;
  border-radius: 5px;
}

.simple-keyboard.hg-theme-default {
  display: inline-block;
}

.simple-keyboard-main.simple-keyboard {
  @apply w-full md:w-[80%];
  background: none;
}

.simple-keyboard-main.simple-keyboard .hg-row:first-child {
  @apply mb-[10px];
}

.simple-keyboard-arrows.simple-keyboard {
  @apply self-end;
  background: none;
}

.simple-keyboard .hg-button.selectedButton {
  background: rgba(5, 25, 70, 0.53);
  @apply text-white;
}

.simple-keyboard .hg-button.emptySpace {
  @apply pointer-events-none;
  background: none;
  border: none;
  box-shadow: none;
}

.simple-keyboard-arrows .hg-row {
  justify-content: center;
}

.simple-keyboard-arrows .hg-button {
  @apply flex w-[50px] grow-0 items-center justify-center;
}

.controlArrows {
  @apply flex w-full items-center justify-between md:w-1/5;
  flex-flow: column;
}

.simple-keyboard-control.simple-keyboard {
  background: none;
}

.simple-keyboard-control.simple-keyboard .hg-row:first-child {
  margin-bottom: 10px;
}

.controlArrows .simple-keyboard-control.simple-keyboard .hg-row:first-child {
  @apply mb-[4px] md:mb-[10px];
}

.hg-button {
  @apply dark:!bg-slate-800 dark:text-white;
}

.simple-keyboard-control .hg-button {
  @apply flex w-[50px] grow-0 items-center justify-center;
}

.numPad {
  @apply flex items-end;
}

.simple-keyboard-numpad.simple-keyboard {
  background: none;
}

.simple-keyboard-numpad.simple-keyboard {
  @apply w-[160px];
}

.simple-keyboard-numpad.simple-keyboard .hg-button {
  @apply flex w-[50px] items-center justify-center;
}

.simple-keyboard-numpadEnd.simple-keyboard {
  @apply w-[50px];
  background: none;
  margin: 0;
  padding: 5px 5px 5px 0;
}

.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
  @apply flex items-center justify-center;
}

.simple-keyboard-numpadEnd .hg-button.hg-standardBtn.hg-button-plus {
  @apply h-[85px];
}

.simple-keyboard-numpadEnd.simple-keyboard .hg-button.hg-button-enter {
  @apply h-[85px];
}

.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
  background: rgba(5, 25, 70, 0.53);
  @apply text-white;
}

.hg-button.hg-standardBtn[data-skbtn="Space"] {
  @apply md:!w-[350px];
}

.hg-theme-default .hg-row .combination-key {
  @apply inline-flex !h-auto !w-auto flex-grow-0 py-1 text-xs;
}

.hg-theme-default .hg-row:has(.combination-key) {
  /*margin-bottom: 100px !important;*/
}

.hg-theme-default .hg-row .hg-button-container,
.hg-theme-default .hg-row .hg-button:not(:last-child) {
  @apply !mr-[2px] md:!mr-[5px];
}

/* Hide the scrollbar by setting the scrollbar color to the background color */
.xterm .xterm-viewport {
  scrollbar-color: theme("colors.gray.900") #002b36;
  scrollbar-width: thin;
}

.hide-scrollbar {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}