livebook/assets/css/components.css

@layer components {
  /* Buttons */

  .button-base {
    @apply inline-flex items-center px-5 py-2 rounded-lg border border-transparent font-medium text-sm whitespace-nowrap;
  }

  .button-blue {
    @apply border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700;
  }

  .button-red {
    @apply border-transparent bg-red-600 text-white hover:bg-red-700 focus:bg-red-700;
  }

  .button-gray {
    @apply border-gray-200 bg-gray-100 text-gray-600 hover:bg-gray-200 focus:bg-gray-200;
  }

  .button-outlined-blue {
    @apply bg-blue-50 border-blue-600 text-blue-600 hover:bg-blue-100 focus:bg-blue-100;
  }

  .button-outlined-red {
    @apply bg-red-50 border-red-600 text-red-600 hover:bg-red-100 focus:bg-red-100;
  }

  .button-outlined-gray {
    @apply bg-white border-gray-300 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
  }

  .button-base:disabled,
  .button-base.disabled {
    @apply cursor-default pointer-events-none border-transparent bg-gray-100 text-gray-400;
  }

  .button-small {
    @apply px-2 py-1 bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
  }

  .button-square-icon {
    @apply p-2 flex items-center justify-center;
  }

  .button-square-icon i {
    @apply text-xl leading-none;
  }

  .icon-button {
    @apply p-1 flex items-center justify-center text-gray-500 hover:text-gray-900 rounded-full;
  }

  .icon-button:focus {
    @apply bg-gray-100;
  }

  .icon-button:disabled,
  .icon-button.disabled {
    @apply cursor-default pointer-events-none text-gray-300;
  }

  .icon-button i {
    line-height: 1;
  }

  .icon-outlined-button {
    @apply rounded-full border-2;
  }

  /* Form fields */

  .input {
    @apply w-full px-3 py-2 bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600 phx-form-error:border-red-300;
  }

  .input[type="color"] {
    @apply py-0 w-16;
  }

  .input--error {
    @apply bg-red-50 border-red-600 text-red-600;
  }

  .input-range {
    height: 8px;
    @apply appearance-none bg-gray-200 rounded-lg;
  }

  .input-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
  }

  .input-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
  }

  /* Custom scrollbars */

  .tiny-scrollbar::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
  }

  .tiny-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    @apply bg-gray-400;
  }

  .tiny-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }

  /* Tabs */

  .tabs {
    @apply w-full flex overflow-x-auto;
  }

  .tabs .tab {
    @apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100 whitespace-nowrap;
  }

  .tabs .tab.active {
    @apply text-blue-600 border-blue-600;
  }

  /* Boxes */

  .error-box {
    @apply rounded-lg px-4 py-2 bg-red-100 text-red-400 font-medium;
  }

  .info-box {
    @apply p-4 bg-gray-100 text-sm text-gray-500 font-medium rounded-lg;
  }
}