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

@layer components {
  .description-list {
    @apply sm:divide-y sm:divide-gray-200;

    & div {
      @apply py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6;
    }

    & dt {
      @apply text-sm font-medium text-gray-500;
    }

    & dd {
      @apply mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 break-all;
    }
  }
  .table {
    @apply min-w-full divide-y divide-gray-300;

    & thead {
      @apply bg-gray-50;
    }
    & th {
      @apply px-3 py-3.5 text-left text-sm font-semibold text-gray-900;
    }

    & th:first-child {
      @apply py-3.5 pl-4 pr-3 sm:pl-6;
    }

    & tbody {
      @apply divide-y divide-gray-200 bg-white;

      & tr {
      @apply text-sm text-gray-700 hover:bg-gray-50;
    }
    }

    & tr td {
      @apply text-sm text-gray-700 hover:bg-gray-50;
    }

    & tr td>a,
    & tr td>span {
      @apply block w-full px-3 py-4
    }

    & tr td:first-child>a,
    & tr td:first-child>span {
      @apply block py-4 pl-4 pr-3 sm:pl-6
    }
  }
  .btn-primary {
    @apply
            relative
            flex
            justify-center
            py-3
            px-4
            border
            border-transparent
            text-sm
            font-medium
            rounded-md
            text-white
            bg-teal-600
            hover:bg-teal-700
            focus:outline-none
            focus:ring-2
            focus:ring-offset-2
            focus:ring-teal-500;
  }

  .form-control {
    @apply appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-teal-500 focus:border-teal-500 focus:z-10 sm:text-sm shadow-sm rounded-md
  }

  .link {
    @apply font-medium text-teal-600 hover:text-teal-500
  }

  .navlink {
    @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium
  }

  .navlink-active {
    @apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium
  }

  .navlink-mobile {
    @apply text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium
  }

  .navlink-mobile-active {
    @apply bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium
  }
}
/*
 * 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.
 *


 */

button .show-when-enabled {
  display: initial;
}

button .flex-when-enabled {
  display: flex;
}

button .flex-when-disabled {
  display: none;
}

button .show-when-disabled {
  display: none;
}

button:disabled .show-when-enabled {
  display: none;
}

button:disabled .flex-when-enabled {
  display: none;
}

button:disabled .flex-when-disabled {
  display: flex;
}

button:disabled .show-when-disabled {
  display: initial;
}