@charset "utf-8";

$card-content-padding: 2rem 2rem 2.5rem 2rem;
$primary: #3d3fea;
$black: #2c2c2c;

@import "../../node_modules/bulma/bulma";

// higher than bulma will report an error
@import "@/styles/variables.scss";
@import "@/styles/mixins.scss";

// menu
$navbar-item-hover-background-color: transparent;

.button {
  box-sizing: border-box;
  position: relative;
  border-radius: 0.375rem;
  transition: all 0.2s;

  // size rewrite
  &.is-small {
    height: 2rem;
    padding: 0.21875rem 1rem;
    font-size: $font-small;
    line-height: 1.5rem;
  }

  &.is-normal {
    // = medium
    height: 2.5rem;
    padding: 0.375rem 1.5rem;
    font-size: $font-normal;
    line-height: 1.75rem;
  }

  &.is-medium {
    // = big
    height: 3rem;
    padding: 0.05rem 2rem;
    font-size: $font-h5;
    line-height: 1.9375rem;
  }

  &.is-large {
    height: 3.75rem;
    padding: 0.78125rem 2.5rem;
    font-size: $font-h4;
    line-height: 2.1875rem;
  }

  // type rewite，primary => just use "button" classname; secondary => is-outlined
  // color rewrite, B1 => is-primary; white => is-white
  &.is-primary {
    color: $white;
    &:hover:not([disabled]) {
      background-color: $blue-primary-hover;
      border-color: transparent;
    }
  }

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

  &.is-primary,
  &.is-white {
    &:focus:not(:active) {
      box-shadow: none;
    }

    &[disabled] {
      background: rgba($black, 0.1);
      border-color: rgba($black, 0.1);
      color: $black;
    }
  }

  // type rewite，primary => just use "button" classname; secondary => is-outlined
  // color rewrite, B1 => is-primary; white => is-white
  &.is-outlined {
    &.is-primary {
      color: $B1;
      &:focus:not(:hover) {
        background: transparent;
        color: $B1;
      }
    }

    &.is-white {
      &:focus {
        color: $white;
      }
    }
  }

  // type rewite，primary => just use "button" classname; secondary => is-outlined; link button => is-ghost
  // color rewrite, B1 => is-primary; white => is-white
  &.is-ghost {
    background: transparent;
    &.is-primary {
      color: $F1;
    }

    &.is-white {
      color: $white;
    }

    &:hover:not([disabled]) {
      background: transparent;
      color: $B1;
      text-decoration: none;
    }
  }

  &.is-font-color-primary {
    color: $B1;
  }
}

.button[disabled],
fieldset[disabled] .button {
  background-color: rgba($black, 10%);
  border: none;
  color: rgba($black, 40%);
  opacity: 1;
}

.select {
  &.is-normal {
    height: 2.25rem;
    select {
      height: inherit;
    }
  }
}