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

@layer base {
  html {
    box-sizing: border-box;
    font-family: Saira, sans-serif;
    background-color: #121212;
    color: #fff
  }
}

@layer utilities {
  .primary-color {
    color: #43b6b7
  }

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

  .full-space {
    @apply w-full h-full;
  }

  .flex-col-center {
    @apply flex flex-col items-center text-center;
  }

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

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

  .teal-borders {
    @apply border-2 border-teal-500 rounded-lg;
  }

  .dashed-borders {
    @apply rounded-lg border-2 border-dashed border-teal-500;
  }

  .white-borders tr, th, td {
    border: 1px solid white;
    border-collapse: collapse;
  }
}

@layer components {
  .container__header {
    @apply text-2xl text-center font-semibold w-full h-1/6 flex justify-center items-end underline decoration-teal-500 decoration-2;
  }

  .container__content {
    @apply w-full h-5/6 center-div;
  }

  .container__button {
    @apply bg-slate-600 hover:bg-slate-700 text-white font-semibold py-2 px-4 rounded mt-4  w-auto;
  }

  .container__button--disabled {
    pointer-events: none;
    @apply disabled:opacity-75 bg-slate-600 text-white font-semibold py-2 px-4 rounded mt-4  w-auto;
  }

  .form__input {
    @apply w-1/3 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-1 px-4 text-gray-700 leading-tight focus:outline-none focus:border-teal-500;
  }

  .form__input--disabled {
    pointer-events: none;
    @apply disabled:opacity-75 w-1/3 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-1 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500;
  }

  .form__label {
    @apply font-semibold py-1 text-lg;
  }

  .container__label--active {
    @apply font-semibold py-1 text-2xl ;
  }

  .container__label--inactive {
    @apply text-gray-300 py-1 text-2xl ;
  }
}
