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

@layer utilities {
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.2s ease-out;
  }
}

/* Custom backdrop styling for dialog modals */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/*
 * 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.
 *


 */

h3, h4{
  color: #AFAFAF;
}

.underlined{
  position: relative;

  &::before{
    content: "";
    position: absolute;
    bottom: -5px;
    left: -5%;
    width: 110%;
    height: 2rem;
    background: #FFF27E;
    z-index: -1;
  }
}

body.turbo-native .turbo-native:hidden {
  display: none;
  background: red;
}

.purple-gradient{
  background: rgb(255,255,255);
  background: linear-gradient(83deg, rgba(255,255,255,1) 0%, rgba(227,206,255,1) 100%);
}

.field_with_errors {
  width: 100%;
  padding: 2px;
  background-color: red;
  display: table;
}

[data-bridge-components~="button"]
[data-controller~="bridge--button"] {
  display: none;
}