@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Custom utilities */

.max-w-fc {
  max-width: fit-content;
}

/* Custom Style */

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  color: #453c52;
  @apply w-full h-full antialiased;
}

@screen md {
  * {
    scrollbar-width: thin;
    scrollbar-color: theme(colors.gray.500) theme(colors.gray.100);
  }
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: theme(colors.gray.100);
  }
  ::-webkit-scrollbar-thumb {
    background-color: theme(colors.gray.500);
    border-radius: 6px;
    border: 3px solid theme(colors.gray.100);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-bold;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

.btn {
  @apply inline-flex items-center justify-center whitespace-nowrap text-sm font-semibold py-2 px-4 rounded cursor-pointer;
}

.btn:focus {
  @apply outline-none shadow-inner;
}

/* Button Styles */

.btn-large {
  @apply py-2 px-5 text-base h-10;
}

.btn-success {
  @apply bg-green-500 text-white;
  background-image: linear-gradient(
    135deg,
    rgba(72, 187, 120, 1) 0%,
    rgba(56, 161, 105, 1) 100%
  );
}

.btn-success:hover {
  @apply bg-green-600;
  background-image: linear-gradient(
    135deg,
    rgba(56, 161, 105, 1) 0%,
    rgba(47, 133, 90, 1) 100%
  );
}

.btn-success:focus {
  @apply bg-green-800;
  background-image: none;
}

.sidebar {
  height: 100vh;
}

.btn-default {
  @apply bg-gray-300 text-gray-500;
}

.btn-default:hover {
  @apply bg-gray-400 text-gray-600;
}

.btn-default:focus {
  @apply bg-gray-400 text-gray-700;
}

.btn-subtle {
  @apply bg-gray-200 text-gray-800;
}

.btn-subtle:hover {
  @apply bg-gray-300 text-gray-900;
}

.btn-subtle:focus {
  @apply bg-gray-400 text-gray-900;
}
