@import url("/styles/base/alpha.less");

@defaultButtonBgColor:        white;
@defaultButtonTextColor:      black;

@redButtonBgColor:            #930a00;
@redButtonTextColor:          white;
@redButtonHoverBgColor:       #b80d00;

@greenButtonBgColor:          #699200;
@greenButtonTextColor:        white;
@greenButtonHoverBgColor:     #77a700;

@blueButtonBgColor:           #0069ac;
@blueButtonTextColor:         white;
@blueButtonHoverBgColor:      #0081d3;

@greyButtonBgColor:           #676867;
@greyButtonTextColor:         white;
@greyButtonHoverBgColor:      #848584;

@whiteButtonBgColor:          white;
@whiteButtonTextColor:        #666;
@whiteButtonHoverBgColor:     #f3f3f3;


// Buttons

button {

  text-shadow: 1px 1px 3px rgba(0,0,0,1.0);
  position: relative;
  background-color: @defaultButtonBgColor;
  border-radius: 4px;
  background-size: 100% 100%;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid;
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 0 5px rgba(0,0,0,0.66);
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: 1.5;

  // Button Sizes
  &.tiny {
    font-size: 9px;
  }
  &.small {
    font-size: 11px;
  }
  &.medium {
    font-size: 13px;
  }
  &.large {
    font-size: 17px;
  }
  
  // Special Home Nav Buttons
  &.homeNav {
    padding: 6px 22px 5px 22px !important;
  }


  &:hover {  }

  &:active { }
  
  // Button Color Names ( Button.{color} )
  &.red {
    color: @redButtonTextColor !important;
    background-color: @redButtonBgColor !important;
    &:hover { background-color: @redButtonHoverBgColor !important; }
  }
  &.green {
    color: @greenButtonTextColor !important;
    background-color: @greenButtonBgColor !important;
    &:hover { background-color: @greenButtonHoverBgColor !important; }
  }
  &.blue {
    color: @blueButtonTextColor !important;
    background-color: @blueButtonBgColor !important;
    &:hover { background-color: @blueButtonHoverBgColor !important; }
  }
  &.grey {
    color: @greyButtonTextColor !important;
    background-color: @greyButtonBgColor !important;
    &:hover { background-color: @greyButtonHoverBgColor !important; }
  }
  &.white {
    color: @whiteButtonTextColor !important;
    background-color: @whiteButtonBgColor !important;
    &:hover { background-color: @whiteButtonHoverBgColor !important; }
  }

  &.icon {
    padding-left: 24px;
  }

  .rss {
    display: inline-block;
    position: absolute;

    background-image: url(img/rss.png);
    width: 16px;
    height: 16px;

    top: -1px;
    left: -20px;
    padding: 0px;
    margin: 0px;
  }

  
  
}

button::-moz-focus-inner {
  border: 0;
}
button::-webkit-focus-inner {
  border: 0;
}
button::focus-inner {
  border: 0;
}

// "Themed" Button Colors ( {theme} button )
// These colors belong to themes, the color definitions above would overwrite these
.frazer_red button {
  color: @redButtonTextColor;
  background-color: @redButtonBgColor;
  &:hover { background-color: @redButtonHoverBgColor; }
}
.frazer_green button {
  color: @greenButtonTextColor;
  background-color: @greenButtonBgColor;
  &:hover { background-color: @greenButtonHoverBgColor; }
}
.frazer_blue button {
  color: @blueButtonTextColor;
  background-color: @blueButtonBgColor;
  &:hover { background-color: @blueButtonHoverBgColor; }
}

.frazer_grey button {
  color: @greyButtonTextColor;
  background-color: @greyButtonBgColor;
  &:hover { background-color: @greyButtonHoverBgColor; }
}

button:disabled {
  .alpha(0.55);
  cursor: default;
}



.css2 {
  
  // Padding on CSS2 buttons are bugged, this is a fix so they match the CSS3 version. 
  button {
    overflow: visible;
    padding: 8px 13px;
  }
  
  // RGBA is not supported in CSS2, replace with HEX.
  .frazer_grey button {
    border-color: #8a8b8a;
  }
}