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

.btn {
  @apply shadow-sm justify-center inline-flex text-base sm:text-sm px-4 py-2 font-medium rounded no-underline items-center;
  transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;
}

.btn:hover, .btn:focus {
  @apply cursor-pointer;
}

.btn-primary {
  @apply bg-primary text-white;
}

.btn-primary:hover, .btn-primary:focus {
  @apply bg-primary-dark;
}

#modal-footer {
  @apply px-7 py-4 flex justify-end bg-secondary-light;
}

.custom-input {
  @apply block w-full rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

.custom-checkbox {
  @apply mr-4 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

.card-label {
  display: flex;
}

.card-label-logo {
  flex: 0 0 32px;
}

.card-label-value {
  flex: 1;
}

.toggle-menu {
  @apply p-2 mt-2 rounded shadow-lg bg-secondary-light z-50 border border-gray-200;
}

.toggle-menu-item {
  @apply block px-4 py-3 rounded text-sm hover:bg-gray-300 w-full text-left select-none transition-colors duration-200 cursor-pointer;
}

.custom-input {
  @apply block w-full rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

.custom-checkbox {
  @apply mr-4 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}

.no-full-width-input {
  @apply block rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */