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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

@layer components {

  html {
    @apply text-app-900;
  }

  input[type=radio]:checked + span {
    @apply border-app-800 relative;
  }

  a.active:after {
    content: "";
    @apply absolute bottom-[-1px] left-0 right-0 h-px bg-app-800 -mb-3 ml-3 mr-3;
  }

  .card {
    @apply flex z-40;
  }

  .card div.overlay {
    @apply w-full h-full bg-gradient-to-l from-app-200 via-app-200/50 to-app-200/50;
  }

  .card div.overlay ~ * {
    @apply w-full max-w-[40vw] bg-white;
  }

  [data-controller="tab-switcher"] a.currentTab {
    @apply bg-app-100;
  }

  .arrow-box {
    position: relative;
  }

  .arrow-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    aspect-ratio: 1/1;
    background: inherit;
    right: 100%;
    margin-right: -35%;
    transform: rotate(45deg) scale(0.7);
  }


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


 */