@use "sass:color";
@use "sass/utilities/mixins" as mx;
@use "sass/themes/light";

$mauve: #8a4d76;
$pink: #fa7c91;
$rose: #ea4aaa;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
$sass: #bf4080;

// Customize

.bd-index-custom-title {
  color: var(--bulma-border-hover);
}

.bd-index-custom-example {
  padding: 1rem;

  .subtitle {
    margin-bottom: 0.5rem;
  }
}

.bd-index-custom.bd-is-after {
  color: $brown;
  font-family: "Nunito", serif;
  margin-top: 0.5rem;

  a {
    color: $pink;

    &:hover {
      color: #363636;
    }
  }

  .subtitle {
    color: $brown;
  }

  .input,
  .select select {
    background-color: $beige-lighter;
    border-color: transparent;
    border-width: 2px;
    box-shadow: none;
    font-family: "Nunito", serif;

    &:hover {
      border-color: $beige-light;
    }

    &:focus {
      border-color: $pink;
      box-shadow: 0 0 0 0.125em rgba($pink, 0.25);
    }
  }

  .select {
    &:not(.is-multiple):not(:hover) {
      &::after {
        border-color: $pink;
      }
    }
  }

  .button {
    &.is-primary {
      background-color: $mauve;
      color: light.$scheme-main;

      &:hover {
        background-color: color.adjust($mauve, $lightness: -2.5%);
      }

      &:active {
        background-color: color.adjust($mauve, $lightness: -5%);
      }
    }

    &.is-link {
      background-color: $pink;
      color: light.$scheme-main;

      &:hover {
        background-color: color.adjust($pink, $lightness: -2.5%);
      }

      &:active {
        background-color: color.adjust($pink, $lightness: -5%);
      }
    }
  }

  @include mx.selection {
    background-color: $pink;
    color: light.$scheme-main;
  }
}