/*
INTERACTIVE ----------------------------------------------------------------------------------------
Interactive helpers often with improved semantic names built on top of Bulma
*/

.button.is-interactive-navigation {
  background-color: $primary;
  border-color: transparent;
  @extend .is-outlined;

  &.is-active,
  &:hover:not([disabled]) {
    background-color: darken($primary, 2.5%);
  }

  &.is-outlined {
    background-color: transparent;
    border-color: $primary;
    color: $primary;

    &.is-active,
    &:hover:not([disabled]) {
      background-color: $primary;
      border-color: transparent;
      color: $white;
    }
  }
}

.is-interactive-primary {
  @extend .is-success;
}

.is-interactive-secondary {
  @extend .is-info;
}

.is-size-8 {
  font-size: 0.6rem !important;
}

.has-text-interactive-primary {
  @extend .has-text-success;
}

.has-text-interactive-secondary {
  @extend .has-text-info;
}

.has-text-interactive-navigation {
  color: $primary;
}

.has-text-interactive-navigation {
  color: $primary;
}

.has-text-inherited {
  color: inherit;
}

a.disabled {
  pointer-events: none;
}

.disabled {
  cursor: not-allowed;
  color: #ccc;
  opacity: 0.7;
}

/*
COMPONENTS -----------------------------------------------------------------------------------------
Component helpers related to Bulma's component classes when bulma-overrides doesn't suffice
*/

.breadcrumb {
  margin-top: 0.75rem;
  margin-left: 1.25rem;

  &:not(:last-child) {
    margin-bottom: 0rem;
  }
}

.dropdown {
  .dropdown-content {
    .dropdown-item {
      &.is-active {
        @extend .is-active-line-item;
      }
    }
  }
}

.field {
  &.is-horizontal {
    .field-body {
      // Bulma's default of 5 prevents its corresponding .field-label's `flex-grow: 1` to carry more weight for our potentially long labels.
      // Lowering this value both increases the horizontal space for the label's content while also decreasing the `<input>` horizontal space.
      // This is better UX as `<input>` dimensions should better reflect the expected amount of input the user will provide.
      // Mobile is a non-issue with this change as a media query enforces vertical layout of `<label>`s and `<input>`s.
      flex-grow: 2.5;
    }
  }
}

.list {
  &.is-hoverable {
    .list-item {
      &:hover {
        @extend .has-background-white-bis;
      }
    }
  }
  .list-item {
    &.is-list-tight {
      padding: 0.5rem 0;
    }
  }
}

article {
  &.media {
    padding: 1rem 0;

    &.is-active {
      @extend .is-active-line-item;
      @extend .is-active-line-item-bordered;
    }

    &.is-hoverable:hover {
      background-color: $white-bis;
    }
    + .media {
      padding: 1rem 0;
      margin: 0;
    }
  }
}

.navbar {
  // Fixes hover dropdown auto closing in navbar via https://github.com/jgthms/bulma/issues/2514#issuecomment-510451361
  @media screen and (min-width: 1025px) {
    .navbar-item.is-hoverable:hover .navbar-dropdown {
      display: block !important;
    }
    .navbar-item.is-hoverable:focus-within .navbar-dropdown {
      display: none;
    }
  }
}

.panel-block {
  &.is-active {
    @extend .is-active-line-item;
    @extend .is-active-line-item-bordered;
  }
}

/*
LAYOUT ---------------------------------------------------------------------------------------------
Layout helpers, often with names based on Bulma naming conventions
*/

.view-body {
  // Full view height - (navbar + breadcrumbs) - (.view-body top and bottom padding + extra padding to mitigate unwanted vertical scrollbar)
  min-height: calc(100vh - 72px - 5.25rem);

  &.is-fluid {
    margin-left: 0;
    margin-right: 0;
  }
}

.modal-card {
  overflow: visible; // Prevents clipping of dropdown and similar components in Modal
  max-height: 90vh;

  &.is-narrow {
    max-width: 440px;
  }

  &.is-wide {
    width: calc(100vw - 160px);
  }

  .modal-card-head-image {
    margin-right: 1.25rem;
  }

  .modal-card-body {
    overflow: visible; // Prevents clipping of dropdown and similar components in Modal

    &.is-overflow-y-scroll {
      overflow-y: scroll;
    }
  }
}

.h-space-between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  .h-space-between-primary {
    flex-grow: 1;
  }
}

.step-spacer {
  margin: 0 0.2rem;
  font-style: italic;
}

.table {
  td {
    vertical-align: middle;

    &.is-vertical-align-baseline {
      vertical-align: baseline;
    }
  }

  th span {
    vertical-align: middle;
  }

  &.has-borderless-cells {
    td {
      @extend .is-borderless;
    }
  }
}

/*
MODIFIERS ------------------------------------------------------------------------------------------
Modifer helpers with names based on Bulma naming conventions
*/

.has-background-transparent {
  background-color: transparent;
}

.has-cursor-pointer {
  cursor: pointer;
}

.has-position-relative {
  position: relative;
}

.has-text-underlined {
  text-decoration: underline;
}

.is-borderless {
  border: none;
}

.is-flex-wrap {
  flex-wrap: wrap;
}

.is-flex-no-grow {
  flex-grow: 0;
}

.is-flex-column {
  flex-direction: column;
}

.is-flex-row {
  flex-direction: row;
}

.is-hcentered {
  justify-content: center;
}

.is-thin {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.is-transparent-50 {
  opacity: 0.5;
}

.is-vcentered {
  align-items: center;
}
