@use "bulma/sass/utilities/initial-variables.scss" as *;

.card {
  --bulma-card-shadow: none;
  border: 1px solid $grey-lighter;
}

:root {
  // somehow this value keeps picking dark mode values despite [data-theme]="light"
  --bulma-hr-background-color: var(--bulma-white-ter);
}

.title,
.subtitle {
  --bulma-subtitle-weight: var(--bulma-weight-semibold);
}

.textarea,
.input {
  box-shadow: none;
}

.button {
  box-shadow: none;
}

/* on hover, add background color, stop width flickering */
.button.is-outlined:hover {
  --bulma-button-border-width: max(1px, 0.0625em);
  background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l), 0.1);
}

.delete {
  --bulma-delete-background-alpha: 0.3;
}

.modal-card {
  border-radius: var(--bulma-modal-card-head-radius);
}

.modal-card-head {
  --bulma-shadow: 0 0.125em 0 0 hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1);
}

.label {
  color: inherit;
}

.control {
  --bulma-input-icon-color: var(--bulma-text-60);
}

.control,
.input,
.select,
.textarea {
  --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.5);
}

// might break lots of stuff
// .skeleton-block:not(:last-child), .media:not(:last-child), .level:not(:last-child), .fixed-grid:not(:last-child), .grid:not(:last-child), .tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .card:not(:last-child), .breadcrumb:not(:last-child), .field:not(:last-child), .file:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .tags:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .buttons:not(:last-child), .box:not(:last-child), .block:not(:last-child) {
//   margin-bottom: inherit;
// }