@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;
  }

  .tab {
    @apply whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium data-[current=true]:border-teal-500 data-[current=true]:text-teal-600 data-[current=false]:border-transparent data-[current=false]:text-gray-500 hover:data-[current=false]:border-gray-300 hover:data-[current=false]:text-gray-700
  }

  .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
  }
}

/* Tooltips (tippy.js), based on its default tippy.css */
[data-tippy-root] {
  max-width: calc(100vw - 10px);
}
.tippy-box {
  @apply relative rounded-md bg-gray-900 text-xs font-normal leading-5 text-white shadow-lg;
  outline: 0;
  transition-property: transform, visibility, opacity;
}
.tippy-box[data-state="hidden"] {
  opacity: 0;
}
.tippy-content {
  @apply relative z-10 px-2.5 py-1.5;
}
.tippy-arrow {
  @apply h-4 w-4 text-gray-900;
}
.tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}
.tippy-box[data-placement^="top"] > .tippy-arrow {
  bottom: 0;
}
.tippy-box[data-placement^="top"] > .tippy-arrow::before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: currentColor;
  transform-origin: center top;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow {
  top: 0;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: currentColor;
  transform-origin: center bottom;
}
/*
 * 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;
}