@tailwind base;

@tailwind components;

@tailwind utilities;

// Global
.alert {
  @apply w-full shadow-md rounded-lg overflow-hidden mb-4 py-4 px-6 font-medium;

  &.success {
    @apply text-green-700 bg-green-300;
  }
  &.danger {
    @apply text-red-700 bg-red-300;
  }
}

.is-invalid {
  @apply border-red-500;
}

.invalid-feedback {
  @apply text-red-500 text-xs italic mt-2;
}

.btn-sm {
  @apply inline-block px-2 py-1 rounded-sm text-xs mr-1 mt-1 select-none cursor-pointer;

  &:focus {
    @apply outline-none;
  }
  &:hover {
    @apply no-underline;
  }
}

.btn-md {
  @apply inline-block px-3 py-2 rounded-sm text-sm mx-1 select-none cursor-pointer;

  &:focus {
    @apply outline-none;
  }
  &:hover {
    @apply no-underline;
  }
}

.btn-gray {
  @apply bg-gray-300 text-black;

  &:hover {
    @apply bg-gray-400;
  }
}

.btn-red {
  @apply bg-red-600 text-white;

  &:hover {
    @apply bg-red-500;
  }
}

.btn-green {
  @apply bg-green-600 text-white;

  &:hover {
    @apply bg-green-500;
  }
}

.btn-indigo {
  @apply bg-indigo-600 text-white;

  &:hover {
    @apply bg-indigo-700;
  }
}

.btn-blue {
  @apply bg-blue-600 text-white;

  &:hover {
    @apply bg-blue-500;
  }
}

table {
  .striped tbody tr:nth-of-type(2n+1) {
    @apply bg-gray-100;
  }

  .bordered {
    th,
    td {
      @apply border;
    }
  }
}

a.disabled {
  @apply opacity-50 pointer-events-none;
}

main a {
  @apply text-blue-600;
}
main a:hover {
  @apply underline;
}

.badge {
  @apply inline-block text-xs px-2 py-1 mr-1 mb-1 rounded-lg;

  &.blue {
    @apply text-white bg-blue-600;
  }
}

// Auth
.auth-card {
  @apply p-6 max-w-sm w-full bg-white shadow-md rounded-md;

  .title {
    @apply flex justify-center items-center mb-4 text-gray-700 font-semibold text-2xl;
  }

  .form-input {
    @apply mt-1 block w-full rounded-md;

    &:focus {
      @apply border-indigo-600;
    }
  }

  .link {
    @apply block text-sm text-indigo-700;

    &:hover {
      @apply underline;
    }
  }

  .button {
    @apply py-2 px-4 text-center bg-indigo-600 rounded-md w-full text-white text-sm;
    &:hover {
      @apply bg-indigo-500;
    }
  }
}

// Header
header.main-header {
  @apply flex justify-between items-center py-4 px-6 bg-white border-b-4 border-indigo-600 h-16;
}

// Sidebar
.sidebar-enable {
  @apply text-gray-500;

  @screen lg {
    @apply hidden;
  }

  &:focus {
    @apply outline-none;
  }
}

.sidebar-disable {
  @apply fixed z-20 inset-0 bg-black opacity-50 transition-opacity;

  @screen lg {
    @apply hidden;
  }
}

.sidebar-menu {
  @apply fixed z-30 inset-y-0 left-0 bg-gray-900 transition duration-300 overflow-y-auto;
  width: fit-content;
  @screen lg {
    @apply translate-x-0 static inset-0;
  }
}

.nav-link {
  @apply flex items-center py-3 px-6 block border-l-4;

  &.active {
    @apply bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100;
  }

  &:not(.active) {
    @apply border-gray-900 text-gray-500;

    &:hover {
      @apply bg-gray-600 bg-opacity-25 text-gray-100;
    }
  }
}

.dropdown-items .nav-link {
  @apply pl-8;
}

.languages {
  @apply relative w-48 mx-4;

  @screen lg {
    @apply mx-0;
  }

  select {
    @apply block appearance-none w-full bg-white border border-gray-400 px-4 py-2 pr-8 rounded shadow leading-tight;
    &:hover {
      @apply border-gray-500;
    }

    &:focus {
      @apply outline-none shadow-outline;
    }
  }

  .icon {
    @apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700;
  }
}

// Admin
.main-card {
  @apply w-full bg-white shadow-md rounded-md overflow-hidden border;

  .header {
    @apply flex justify-between items-center px-5 py-3 text-gray-700 border-b text-sm;
  }

  .body {
    @apply px-5 py-6 bg-gray-200 text-gray-700 border-b;
  }

  .form-group {
    @apply mt-2 relative rounded-md shadow-sm;

    input {
      @apply form-input w-full px-3 py-2 appearance-none rounded-md;

      &:focus {
        @apply border-indigo-600;
      }
    }

    select {
      @apply form-input w-full px-3 py-2 appearance-none rounded-md;

      &:focus {
        @apply border-indigo-600;
      }
    }
  }

  .footer {
    @apply flex justify-end px-5 py-3;

    .submit-button {
      @apply px-3 py-1 bg-indigo-600 text-white rounded-md text-sm;

      &:hover {
        @apply bg-indigo-500;
      }

      &:focus {
        @apply outline-none;
      }
    }
  }

  .show-table {
    @apply w-full table-auto bg-white;

    th,
    td {
      @apply p-3 text-left;
    }
  }
}
