/*
 button.less
*/
.fancy-button {
  text-align: @button-text-align;

  font-weight: bold;
    
  .border-radius(@button-border-radius);
  .user-select(none);

  -webkit-transition: background-color 100ms linear, color 100ms linear;
  -moz-transition: background-color 100ms linear, color 100ms linear;
  -o-transition: background-color 100ms linear, color 100ms linear;
  transition: background-color 100ms linear, color 100ms linear;

  line-height: 13px;
  font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
  font-size: 11px;
  cursor: pointer;

  background-color: transparent;
  border: 1px solid transparent;
  border-color: #d4d4d4 #d4d4d4 #bcbcbc;
  color: #4C6B8F;
  min-height: 31px;
  min-width: 31px;
  padding: 0 5px 0 4px;
  float: left;
  margin-top: 3px;

  &:hover {
    background-color: #fafafa;
    border-color: #d4d4d4 #d4d4d4 #bcbcbc;
  }

  &:active {
    //border-bottom-color: @button-border-bottom-color-active;
    background-color: #dae1e8;
    .box-shadow(inset 0 0 10px #cbd3da);
  }

  .fancy-button-image {
    float: left;
    height: 18px;
    margin-top: 5px;
    padding: 0 10px 0 10px;
    display: none;
    background-repeat: no-repeat;
  }

  .fancy-button-text {
    padding-top: @button-text-padding-top;
    color: #048DC8;

    position: relative;
    top: 8px;
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }

  div.fancy-button-image-color {
    width: 17px;
    height: 17px;
    border: 1px solid #dbdbdb;
    cursor: pointer;
    padding: 0;
    margin-top: 6px;
  }
}

.fancy-button.fancy-button-pressed {
  background-color: #dae1e8;
  border-color: #d4d4d4 #d4d4d4 #bcbcbc;
  //.border-radius(0px);
}

.fancy-button-disabled {
  background-color: #dfe5ed;
  color: #627485;
  &:hover {
    background-color: #dfe5ed;
    color: #627485;
    cursor: default;
  }

  &:active {
    background-color: #dfe5ed;
    color: #627485;
    box-shadow: none;
    cursor: default;
  }
}

.fancy-panel .fancy-bar-left-scroller {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 20px;
  border-radius: 0;
  border-left-color: transparent;
  background-color: #F7F7F7;
}

.fancy-panel .fancy-bar-left-scroller .fancy-button-image {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%231e8fc6%22%20d%3D%22M31.7%20239l136-136c9.4-9.4%2024.6-9.4%2033.9%200l22.6%2022.6c9.4%209.4%209.4%2024.6%200%2033.9L127.9%20256l96.4%2096.4c9.4%209.4%209.4%2024.6%200%2033.9L201.7%20409c-9.4%209.4-24.6%209.4-33.9%200l-136-136c-9.5-9.4-9.5-24.6-.1-34z%22%2F%3E%3C%2Fsvg%3E');
  background-position: -2px 2px!important;
  margin-top: 9px !important;
}

.fancy-bar-left-scroller.fancy-button-disabled {
  .opacity(1);
  &:hover {
    background-color: #F7F7F7;
    border-right-color: #d4d4d4;
  }
}

.fancy-bar-left-scroller.fancy-button-disabled .fancy-button-image {
  .opacity(0.3);
}

.fancy-panel .fancy-bar-right-scroller {
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  min-width: 20px;
  border-radius: 0;
  border-right-color: transparent;
  background-color: #F7F7F7;
}

.fancy-panel .fancy-bar-right-scroller .fancy-button-image {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%231e8fc6%22%20d%3D%22M224.3%20273l-136%20136c-9.4%209.4-24.6%209.4-33.9%200l-22.6-22.6c-9.4-9.4-9.4-24.6%200-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6%200-33.9L54.3%20103c9.4-9.4%2024.6-9.4%2033.9%200l136%20136c9.5%209.4%209.5%2024.6.1%2034z%22%2F%3E%3C%2Fsvg%3E');
  background-position: 2px 2px!important;
  margin-top: 9px !important;
}

.fancy-bar-right-scroller.fancy-button-disabled {
  .opacity(1);
  &:hover {
    background-color: #F7F7F7;
    border-left-color: #d4d4d4;
  }
}

.fancy-bar-right-scroller.fancy-button-disabled .fancy-button-image {
  .opacity(0.3);
}

.fancy-button-menu {
  position: relative;
}

.fancy-button-menu .fancy-button-drop {
  position: absolute;
  right: 0;
  top: 2px;
  width: 18px;
  height: 22px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20fill%3D%22%23088ec7%22%20d%3D%22M31.3%20192h257.3c17.8%200%2026.7%2021.5%2014.1%2034.1L174.1%20354.8c-7.8%207.8-20.5%207.8-28.3%200L17.2%20226.1C4.6%20213.5%2013.5%20192%2031.3%20192z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position-y: 5px;
  background-position-x: 1px;
}

.fancy-button-menu .fancy-button-text {
  margin-right: 5px;
}