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

@layer base {
  input:disabled,
  button:disabled,
  select:disabled,
  textarea:disabled,
  a.disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
  }
}

dialog:not([open]), dialog[open=false] {
  display: none;
}

body {
  .show-on-connected { display: none; }
}

body.connected {
  .hide-on-connected { display: none; }
  .show-on-connected { display: block; }
}

/* Remove focus outline from inputs and buttons */
input:focus, button:focus {
  box-shadow: none !important;
}

button:focus-visible, a:focus-visible, [type=file]:focus {
  outline: none;
}

/* Ripple animation */

.ripple {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 50%;
  background-color: #53ae26;
  position: relative;
}

.ripple:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  border: 3px solid #53ae26;
  animation: anim-ripple 2s infinite;
}

.spinner {
  border-width: 2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

@keyframes anim-ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
 }
  to {
    opacity: 0;
    transform: scale3d(1.25, 1.25, 1);
 }
}

.last {
  margin-bottom: 100px;

  > input {
    visibility: hidden;
  }
}

.form-disabled {
  opacity: 0.6;
  pointer-events: none;
}
/*
 * 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.
 *


 */

dialog:not([open]), dialog[open=false] {
  display: none;
}

body {
  .show-on-connected { display: none; }
}

body.connected {
  .hide-on-connected { display: none; }
  .show-on-connected { display: block; }
}

/* Remove focus outline from inputs and buttons */
input:focus, button:focus {
  box-shadow: none !important;
}

button:focus-visible, a:focus-visible, [type=file]:focus {
  outline: none;
}

/* Ripple animation */

.ripple {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 50%;
  background-color: #53ae26;
  position: relative;
}

.ripple:before {
  content: "";
  width: 22px;
  height: 22px;
  position: absolute;
  border-radius: 50%;
  position: absolute;
  top: -3px;
  left: -3px;
  border: 3px solid #53ae26;
  animation: anim-ripple 2s infinite;
}

.spinner {
  border-width: 2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

@keyframes anim-ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
 }
  to {
    opacity: 0;
    transform: scale3d(1.25, 1.25, 1);
 }
}