// ====================================================================
// KOOHII BUTTONS
//
//  Base:
//
//    ko-Btn                   Handles :focus, :hover etc
//
//  Colors:
//
//    ko-Btn--danger
//    ko-Btn--primary
//    ko-Btn--success
//
//    ko-Btn--editcard
//
//  States:
//
//    is-ghost                 Use outline aka "ghost" style
//    is-disabled              Use grayed out colors
//
//  Sizes:
//
//    ko-Btn--small            ~31px high, 14px text
//    ko-Btn                   ~36px high, medium size, good for forms
//    ko-Btn--large            ~41px high, good for primary actions/ux
//
//
//    @see /ux page for live demos
//
// ====================================================================

// --------------------------------------------------------------------
// Base class
// --------------------------------------------------------------------
.ko-Btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: none;

  border-radius: $--border-radius-md;
  padding: 0.375rem 0.75rem;

  // apply colors
  background-color: var(--ko-btn-bg);
  border-color: var(--ko-btn-border);
  color: var(--ko-btn-text);

  // apply :hover
  // apply :focus
  &:hover,
  &:focus {
    background-color: var(--ko-btn-hover-bg);
    border-color: var(--ko-btn-hover-border);
    color: var(--ko-btn-hover-text);
    text-decoration: none; // when applied to <a>
  }

  //
  &.is-disabled {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
      background-color: var(--ko-btn-disabled-bg);
      border-color: var(--ko-btn-disabled-border);
      color: var(--ko-btn-disabled-text);
    }
  }
}

// --------------------------------------------------------------------
// Colors
// --------------------------------------------------------------------
.ko-Btn {
  @include button-color($bg: $--color-btn-default);

  // (override) warm color for the default outline button
  &.is-ghost {
    --ko-btn-border: #d4cdba;
    --ko-btn-text: #6f6961;
    --ko-btn-hover-text: #3f3931;
    --ko-btn-hover-border: #928c7d;
  }
}

.ko-Btn--primary {
  @include button-color($bg: $--color-btn-primary);
}
.ko-Btn--danger {
  @include button-color($bg: $--color-btn-danger);
}
.ko-Btn--success {
  @include button-color($bg: $--color-btn-success);
}

// --------------------------------------------------------------------
// Sizes
//
//   Note selector specificity required due to element's `.el-button.is-round`
// --------------------------------------------------------------------
.ko-Btn {
  @include font($--button-font-size-md);
  padding: 10px 12px; // ~36px height
  border-radius: $--border-radius-lg;
}

.ko-Btn--small {
  @include font($--button-font-size-sm);
  padding: 8px 10px; // ~31 px height
  border-radius: $--border-radius-lg;
}

@include breakpoint-up(lg) {
  .ko-Btn--large {
    @include font($--button-font-size-lg);
    padding: 12px 14px; // ~41px height
    border-radius: $--border-radius-lg;
  }
}

// --------------------------------------------------------------------
// Shapes
// --------------------------------------------------------------------

// --------------------------------------------------------------------
// Misc. special styles
// --------------------------------------------------------------------

// used on legacy homepage, maybe reuse for something else later
//  <button class="ko-Btn ko-Btn--push ko-Btn--xl">...
.ko-Btn {
  &--push {
    --ko-btn-text: #fff;
    --ko-btn-bg: #5cb85c;
    --ko-btn-hover-bg: #5cb85c;
    border-radius: $--border-radius-md;
    border-width: 0 0 0 0;
    border-bottom: 3px solid #318a31;

    &:active,
    &:hover {
      border-bottom-width: 1px;
      margin-top: 2px;
    }
  }

  &--xl {
    @include font($--button-font-size-xl);
    border-radius: $--border-radius-lg;
    padding: 15px 1rem 15px; // ~51px height
  }
}

// --------------------------------------------------------------------
// SRS buttons : used at top of Leitner Chart
//   <button ... class="ko-Btn ko-Btn--srs is-srs-new">
//     <strong>15</strong> lorem ipsum
//   </button>
// --------------------------------------------------------------------
.ko-Btn--srs {
  border-radius: $--border-radius-lg;
  border-width: 0 0 0 0;
  border-bottom: 3px solid #318a31;

  @include font($--button-font-size-xl);
  padding: 15px 1rem 13px; // ~49px height

  // flashcard count on the button label
  strong {
    color: #fff;
  }

  &:active,
  &:focus,
  &:hover {
    border-bottom-width: 1px;
    margin-top: 2px;
  }

  // srs button colors
  &.is-srs-due {
    --ko-btn-text: #502a00;
    --ko-btn-hover-text: #502a00;
    --ko-btn-bg: #f7a247;
    --ko-btn-hover-bg: #f7a247;
    border-bottom-color: #d2633f;
  }
  &.is-srs-failed {
    --ko-btn-text: #601008;
    --ko-btn-hover-text: #601008;
    --ko-btn-bg: #f86464;
    --ko-btn-hover-bg: #f86464;
    border-bottom-color: #d2633f;
  }
  &.is-srs-new {
    --ko-btn-text: #0c2b5a;
    --ko-btn-hover-text: #0c2b5a;
    --ko-btn-bg: #79b8e9;
    --ko-btn-hover-bg: #79b8e9;
    border-bottom-color: #3d83ac;
  }
}

// --------------------------------------------------------------------
// A "sample" button as used in the Help page, when documentation
//  refers to a button (ie. "select *Some Button* to do xyz").
//
//   <span class="ko-ExBtn ko-ExBtn--success">The Button</span>
// --------------------------------------------------------------------
.ko-ExBtn {
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  @include mx(0.25em);
  border: 1px solid #d4cdba;
  color: #6f6961;

  &--danger {
    $text: $--color-btn-danger;
    border-color: $text;
    color: #{darken(saturate($text, 5), 10)};
  }

  &--success {
    $text: $--color-btn-success;
    border-color: $text;
    color: #{darken(saturate($text, 5), 10)};
  }
}
