// Set your brand colors
$crimson: #00d1b2; //#B80F0A;

// Override global Sass variables from the /utilities folder
@use "bulma/sass/utilities" with ($family-primary: '"Nunito", sans-serif',
$primary: $crimson,
);
// $grey-dark: $brown,
// $grey-light: $beige-light,
// $link: $pink,
// $control-border-width: 2px

@forward "bulma/sass/layout/footer" with ($footer-padding: 1.5rem 1.5rem 3rem !default);

@forward "bulma/sass/base";

@forward "bulma/sass/components/pagination";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/components/message";
@forward "bulma/sass/components/dropdown";
@forward "bulma/sass/components/panel";

@forward "bulma/sass/elements/button";
@forward "bulma/sass/elements/box";
@forward "bulma/sass/elements/icon";
@forward "bulma/sass/elements/content";
@forward "bulma/sass/elements/progress";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/elements/table";
@forward "bulma/sass/elements/title";
@forward "bulma/sass/elements/delete";
@forward "bulma/sass/elements/notification";

@forward "bulma/sass/form";

@forward "bulma/sass/layout/container";
@forward "bulma/sass/layout/level";
@use "bulma/sass/layout/section" with ($section-padding: 1.5rem 1.5rem);
@forward "bulma/sass/layout/hero";

@forward "bulma/sass/grid";

@forward "bulma/sass/helpers/spacing";
@forward "bulma/sass/helpers/flexbox";
@forward "bulma/sass/helpers/color";
@forward "bulma/sass/helpers/visibility";
@forward "bulma/sass/helpers/other";

// Import the themes so that all CSS variables have a value
@forward "bulma/sass/themes";

// TODO: bulma theme for sweetalert looks and feels outdated
@use "sweetalert2-neutral/src/sweetalert2.scss" with ($swal2-confirm-button-background-color: $crimson);

[class*=" icon"],
[class^=icon] {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  position: relative;
  top: -.05em;
  vertical-align: middle;
}

// TODO: refactor into bulmas is-hidden?
.result {
  visibility: hidden;
}

.fadeout {
  visibility: visible;
  opacity: 0;
  transition: opacity 2s ease-in;
}

// TODO: refactor into bulmas is-hidden?
section.htmx-request {
  visibility: hidden;
}

a.dropdown-item[disabled] {
    color: hsl(221, 14%, 48%); // $grey;
    cursor: default;
    pointer-events: none;
}

#toast {
  position: fixed;
  padding: 0 1px;
  top: 10px;
  right: 10px;
  z-index: 100;
}

#toast-message {
  padding: 17px 21px 22px 21px;
}

#toast-progress {
    height: 5px;
    position: relative;
    animation: progressBar 3s ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode:both;
    border-radius: 20px 20px 0 0;
}

@keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}