@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("./font.css");

:root {
  --primary-border-radius: 8px;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  overflow-y: scroll;
}

.flex-center {
  @apply flex items-center justify-center;
}

.flex-horizontal {
  @apply flex items-center;
}

.flex-vertical {
  @apply flex flex-col justify-center;
}

.scroll-bar {
  @apply overflow-y-scroll scrollbar scrollbar-w-[4px] scrollbar-thumb-rounded-[5px] scrollbar-track-rounded-[5px] scrollbar-thumb-primary-500 scrollbar-track-gray-100;
}

div.arrow-div {
  position: relative;
  width: 150px;
  height: 40px;
  border-right: 0px;
}
div.arrow-div:before {
  content: "";
  position: absolute;
  height: 29px;
  width: 28px;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  right: -29px;
  top: -1.5px;
  border-top: 1px solid var(--color-primary-500);
  border-right: 1px solid var(--color-primary-500);
}