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

@layer base {
  * {
    box-sizing: border-box;
  }

  *:before,
  *:after {
    box-sizing: border-box;
  }

  html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  body {
    font-family: "Open Sans", sans-serif;
    font-size: 1.6rem;
    line-height: 1.75;
    font-weight: 300;
    color: #303030;
    letter-spacing: 0.045em;
    background-color: #fbfbfb;
  }

  .tooltip {
    position: relative;
  }

  strong {
    font-weight: 500;
  }

  .tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
    z-index: 99;
    opacity: 0;
    transition: .3s opacity;
  }

  [tooltip-position='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -12px;
    transform: translatey(-50%) rotate(-90deg)
  }

  [tooltip-position='top']::before {
    left: 50%;
  }

  [tooltip-position='buttom']::before {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
  }

  [tooltip-position='right']::before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg)
  }

  .tooltip::after {
    content: attr(data-text);
    position: absolute;
    min-width: 10rem;
    left: 50%;
    top: -6px;
    transform: translateX(-50%) translateY(-100%);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    pointer-events: none;
    padding: 4px 4px;
    z-index: 99;
    opacity: 0;
    transition: .3s opacity;
  }

  [tooltip-position='left']::after {
    left: 0;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
  }

  [tooltip-position='top']::after {
    left: 50%;
  }

  [tooltip-position='buttom']::after {
    top: 100%;
    margin-top: 8px;
    transform: translateX(-50%) translateY(0%);
  }

  [tooltip-position='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 8px;
    transform: translateX(0%) translateY(-50%);
  }

  .tooltip:hover::after, .tooltip:hover::before {
    opacity: 1
  }


  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  //#------------
  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }

  h3 {
    @apply text-lg;
  }

  .class-button {
    @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
    @apply focus-visible:outline-gray-500 bg-gray-500 hover:bg-white hover:text-gray-500 hover:border-gray-50 hover:outline;
  }

  .class-button-outline {
    @apply rounded-md px-3 py-2 text-center text-sm font-semibold text-gray-500 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
    @apply outline outline-1 border-gray-500 focus-visible:outline-gray-500 bg-white hover:bg-gray-500  hover:text-white hover:border-gray-500  hover:outline;
  }

  .class-label {
    @apply text-sm font-semibold leading-6 text-gray-900;
  }

  .class-text-field {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
  }

  .class-card-container {
    @apply overflow-hidden bg-white shadow sm:rounded-lg p-5
  }

  .class-input {
    @apply sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:py-6 pl-2
  }

  .class-tr {
    @apply top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell
  }

  .class-td {
    @apply whitespace-nowrap px-3 py-5 text-sm text-gray-500
  }

  .class-menu-link {
    @apply hover:font-semibold hover:text-gray-500 block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
  }

  .class-text-link {
    @apply hover:font-semibold hover:text-gray-500 block rounded-md text-sm leading-6 text-gray-700
  }

  .class-menu-active-link {
    @apply font-semibold block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700
  }
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}