$default: #777;
$primary: #226CFF;
$warning: #FF2247;
$info: #FFDA22;
$action: #4FBE00;
$highlight: #FFB624;

/* DEFAULT button shortcode styles */
.lbdesign_button,
.lbdesign_button:hover,
.lbdesign_button:focus,
.lbdesign_button:active,
.lbdesign_button.active {
  text-decoration: none;
}
.lbdesign_button {
    padding: 0.625em 0.9375em;
    display: inline-block;
    background: #777;
    color: white;
    line-height: inherit;
    border-bottom: none;

    &:hover,
    &:focus {
        background: darken(#777, 10%);
        color: #fff;
    }
}

/* SIZES */
.lbdesign_small {
    font-size: 85%;
}
.lbdesign_large {
    font-size: 115%;
}
.lbdesign_xlarge {
  font-size: 125%;
}

/* TYPES */
.lbdesign_primary {
    background: $primary;
    &:hover,
    &:focus {
        background: darken($primary, 10%);
    }
}
.lbdesign_warning {
    background: $warning;
    &:hover,
    &:focus {
        background: darken($warning, 10%);
    }
}
.lbdesign_highlight {
  background: $highlight;
  &:hover,
  &:focus {
    background: darken($highlight, 10%);
  }
}
.lbdesign_info {
    background: $info;
    &:hover,
    &:focus {
        background: darken($info, 10%);
    }
}
.lbdesign_action {
    background: $action;
    &:hover,
    &:focus {
        background: darken($action, 10%);
    }
}


/* STYLES */
.lbdesign_rounded {
  border-radius: 0.3125em;
}
.lbdesign_pill {
  border-radius: 2em;
}
.lbdesign_block {
  display: block;
  text-align: center;
}
.lbdesign_full_width {
    width: max-content;
    text-align: center;
}