@import "variables.less";
@import "../common/ToolBarButton.less";

.mblToolBarButton{
  border: none;
  background-color: rgba(0, 0, 0, 0);
  padding-top: 3px;
  color: #007AFF;
}

.mblToolBarButtonSelected{
  color: #C6DEF9;
}

.mblToolBarButtonLabel {
  padding: 0 7px;
  color: #007AFF;
}

.mblToolBarButtonHasLeftArrow .mblToolBarButtonLabel {
  padding: 0 7px;
}

.mblToolBarButtonHasRightArrow .mblToolBarButtonLabel {
  padding: 0 10px;
}

.mblToolBarButtonSelected .mblToolBarButtonLabel {
  color: #C6DEF9;
}

.mblToolBarButtonSelected .mblToolBarButtonArrow {
  border: 5px solid #C6DEF9;
  border-top: none;
  border-right: none;
}
.mblToolBarButtonLeftArrow {
  .transform(scale(.75, .75) rotate(45deg));
}
.mblToolBarButtonHasLeftArrow *, .mblToolBarButtonHasRightArrow *{
  background-color: rgba(0,0,0,0);
}

.mblToolBarButtonRightArrow {
  .transform(scale(.75, .75) rotate(225deg));
}

.mblToolBarButtonLightIcon {
  background-color: #007AFF;
}
.mblToolBarButtonSelected.mblToolBarButtonLightIcon {
  background-color: #C6DEF9;
}