infisical/frontend/src/styles/globals.css

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

@layer utilities {
  .flex-0 {
    flex: 0;
  }
  .flex-2 {
    flex-grow: 2;
  }

  .flex-3 {
    flex-grow: 3;
  }

  .min-table-row {
    width: 1%;
    white-space: nowrap;
  }
}

@layer components {
  .secret-table {
    @apply w-full bg-mineshaft-800 text-left text-bunker-300;
  }

  /* padding except for comment column */
  .secret-table th {
    @apply py-2 px-4 font-medium;
  }

  .secret-table td {
    @apply py-1 px-1 pr-2 text-sm;
  }

  .secret-table th:not(:last-child),
  .secret-table td:not(:last-child) {
    @apply border-r border-mineshaft-600;
  }

  .secret-table tr {
    @apply border-b border-mineshaft-600;
  }

  .breadcrumb::after,
  .breadcrumb::before {
    content: "";
    height: 60%;
    width: 100%;
    z-index: -1;
    display: block;
    position: absolute;
    @apply bg-mineshaft-800;
  }

  .breadcrumb:hover::before {
    @apply bg-mineshaft-600;
  }

  .breadcrumb:hover::after {
    @apply bg-mineshaft-600;
  }

  .breadcrumb::after {
    left: 4px;
    bottom: -2.5px;
    transform: skew(-30deg);
  }

  .breadcrumb::before {
    left: 4px;
    top: -2.5px;
    transform: skew(30deg);
  }

  .thin-scrollbar::-webkit-scrollbar {
    width: 0.25rem;
    background-color: transparent;
  }

  .thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: gray;
  }

  .thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
  }

  #nprogress .bar {
    @apply bg-primary-400;
  }
}

@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/700.css";