@css-prefix: fish;
@base-font-size: 1rem;
@base-font-color: rgba(0, 0, 0, 0.87);
//
@color-names: red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, dark, black;
@color-length: length(@color-names);
//@color-values: #DB2828, #F2711C, #FBBD08, #B5CC18, #21BA45, #00B5AD, #2185D0, #6435C9, #A333C8, #E03997, #A5673F, #767676, #1B1C1D;

@red-color: #DB2828;
@red-hover-color: #d01919;
@orange-color: #F2711C;
@orange-hover-color: #f26202;
@yellow-color: #FBBD08;
@yellow-hover-color: #eaae00;
@olive-color: #B5CC18;
@olive-hover-color: #a7bd0d;
@green-color: #21BA45;
@green-hover-color: #16ab39;
@teal-color: #00B5AD;
@teal-hover-color: #009c95;
@blue-color: #2185D0;
@blue-hover-color: #1678c2;
@violet-color: #6435C9;
@violet-hover-color: #5829bb;
@purple-color: #A333C8;
@purple-hover-color: #9627ba;
@pink-color: #E03997;
@pink-hover-color: #e61a8d;
@brown-color: #A5673F;
@brown-hover-color: #975b33;
@grey-color: #767676;
@grey-hover-color: #838383;
@dark-color: #343a40;
@dark-hover-color: darken(@dark-color, 10%);
@black-color: #1B1C1D;
@black-hover-color: #27292a;

@primary-color: @blue-color;
@primary-hover-color: @blue-hover-color;
@active-background-color: #ecf6fd;
@active-border-color: @primary-color;
@active-color: @primary-color;


@border-color: rgba(34,36,38,.15); // #d9d9d9
@border-style: 1px solid @border-color;
@border-radius: 3px;

// @1pxtoem: 1/16;
// @2pxtoem: @1pxtoem * 2;

@padding-vertical: .785em;
@padding-horizontal: .925em;

@button-padding: @padding-vertical 1em;

@line-height: 1.5em;

@layout-side-width: 200px;

@hover-background-color: #f8f8f8; //#f4f5f6; // rgba(0, 0, 0, 0.05);#F3F4F5
@hover-color: @primary-color;


@card-border-color: rgba(34,36,38,.1);
@card-border-style: 1px solid @card-border-color;

@menu-item-border-color: #fafafa;
@menu-min-width: 160px;

@input-min-width: 6em;
@input-border-color: @border-color;
@input-padding-horizontal: 0.75em;
@input-padding-vertical: 0.5em;
@input-padding: @input-padding-vertical @input-padding-horizontal;
@input-active-color: rgba(16,142,233, .8);
@input-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.06);

@select-padding: @input-padding-vertical 2.6em @input-padding-vertical @input-padding-horizontal;

@select-multiple-padding-vertical: @input-padding-vertical * (1/3);
@select-multiple-padding-left: @input-padding-vertical * (2/3);
@select-multiple-padding-right: @input-padding-horizontal + 1em;
@select-multiple-padding: @select-multiple-padding-vertical 2.6em @select-multiple-padding-vertical @select-multiple-padding-left;

@select-multiple-child-margin-vertical: @input-padding-vertical * (2/3) + 0.001;
@select-multiple-child-margin-left: @input-padding-horizontal - @select-multiple-padding-left;
@select-multiple-child-margin: @select-multiple-child-margin-vertical 0 @select-multiple-child-margin-vertical @select-multiple-child-margin-left;

@modal-width: 850px;
@modal-border-radius: 3px;

@transfer-padding: @input-padding;
@transfer-header-background-color: #f8f8f9;
@transfer-item-hover-background-color: #f8f8f9;

@table-cell-padding: .7em .8em;
@table-cell-border-color: rgba(34,36,38,.1);
@table-cell-border-style: 1px solid @table-cell-border-color;
@table-cell-hover-background-color: #fcfcfd;
@table-th-background-color: #f8f8f9;
@table-th-hover-background-color: #f1f1f2;

@warning-color: #f2c037;
@info-color: #108ee9;
@error-color: #db2828;
@success-color: #21ba45;

@warning-font-color: #794b02;
@info-font-color: #0e566c;
@error-font-color: #912d2b;
@success-font-color: #1a531b;

@warning-shadow-color: rgba(255, 191, 0, .5);
@info-shadow-color: rgba(16, 142, 233, .5);
@error-shadow-color: rgba(240, 65, 52, .5);
@success-shadow-color: rgba(0, 168, 84, .5);

@warning-background-color: rgba(255, 191, 0, .15);
@info-background-color: rgba(16, 142, 233, .15);
@error-background-color: rgba(240, 65, 52, .15);
@success-background-color: rgba(0, 168, 84, .15);

@form-error-color: #db2828;

@popup-padding: 1em;
@notice-padding: .8em 1em;

/* Responsive */
@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;

/* Responsive */
@largestMobileScreen : (@tabletBreakpoint - 1px);
@largestTabletScreen : (@computerBreakpoint - 1px);
@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);

//.warning() {
//  box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 transparent;
//  background: #F8FFFF;
//  color: #276F86;
//}
//.info() {
//
//}

.padding() {
  padding: @padding-vertical @padding-horizontal;
}
.box-shadow() {
  box-shadow: 0px 2px 3px 0px @border-color;
  //box-shadow: 0 2px 3px hsla(0,0%,4%,.1), 0 0 0 1px hsla(0,0%,4%,.1);
}
.border() {
  border: @border-style;
}

.user-select(@v) {
  -webkit-user-select: @v;
  -moz-user-select: @v;
  -ms-user-select: @v;
  user-select: @v;
}

.type-basic() {
  font-weight: 400;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(34,36,38,.1) inset;
  &:focus, &:hover, &.active {
    background-color: #fff;
    //border-color: rgba(0,0,0,0.3);
    box-shadow: 0 0 0 1px rgba(34,36,38,.3) inset;
  }
}
.type-positive() {
  color: #fff;
  background-color: @green-color!important;
  &:focus, &:hover, &.active {
    color: #fff;
    background: @green-hover-color!important;
  }
}
.type-negative() {
  color: #fff;
  background-color: @red-color!important;
  &:focus, &:hover, &.active {
    color: #fff;
    background-color: @red-hover-color!important;
  }
}
.type-primary() {
  color: #fff;
  background-color: @primary-color!important;
  &:focus, &:hover, &.active {
    color: #fff;
    background-color: @primary-hover-color!important;
  }
}

.loop-color(@counter) when (@counter > 0) {
  .loop-color((@counter - 1));
  @color-name: extract(@color-names, @counter);
  @color-value: "@{color-name}-color";
  @color-hover-value: "@{color-name}-hover-color";
  &.@{color-name} {
    color: #fff;
    background-color: @@color-value;
    &:focus, &:hover, &.active {
      color: #fff;
      background-color: @@color-hover-value;
    }
  }
}

.card-loop-color(@counter) when (@counter > 0) {
  .card-loop-color((@counter - 1));
  @color-name: extract(@color-names, @counter);
  @color-value: "@{color-name}-color";
  &.@{color-name} {
    border-color: @@color-value;
    > .header {
      color: #fff;
      background: @@color-value;
    }
  }
}

.timeline-loop-color(@counter) when (@counter > 0) {
  .timeline-loop-color((@counter - 1));
  @color-name: extract(@color-names, @counter);
  @color-value: "@{color-name}-color";
  &.@{color-name} {
    > .badge {
      background: @@color-value;
    }
  }
}

.segment-loop-color(@counter) when (@counter > 0) {
  .segment-loop-color((@counter - 1));
  @color-name: extract(@color-names, @counter);
  @color-value: "@{color-name}-color";
  &.@{color-name} {
    border-top: 2px solid @@color-value;
  }
}

.colors() {
  .loop-color(@color-length);
}

.size-mini() {
  font-size: @base-font-size - 0.4;
}
.size-tiny() {
  font-size: @base-font-size - 0.3;
}
.size-small() {
  font-size: @base-font-size - 0.2;
}
.size-medium() {
  font-size: @base-font-size - 0.1;
}
.size-normal() {
  font-size: @base-font-size;
}
.size-large() {
  font-size: @base-font-size + 0.15;
}
.size-big() {
  font-size: @base-font-size + 0.25;
}
.size-huge() {
  font-size: @base-font-size + 0.35;
}
.size-massive() {
  font-size: @base-font-size + 0.45;
}

.font-sizes() {
  &.mini {
    .size-mini;
  }
  &.tiny {
    .size-tiny;
  }
  &.small {
    .size-small;
  }
  &.medium {
    .size-medium;
  }
  &.large {
    .size-large;
  }
  &.big {
    .size-big;
  }
  &.huge {
    .size-huge;
  }
  &.massive {
    .size-massive;
  }
}
._disabled() {
  cursor: default;
  opacity: .55!important;
  background-image: none!important;
  box-shadow: none!important;
  pointer-events: none!important;
}
.disabled() {
  &.disabled {
    ._disabled;
  }
}

.flex(@v) {
  -webkit-flex: @v;
  -ms-flex: @v;
  flex: @v;
}

.flex-direction(@v) {
  -webkit-flex-direction: @v;
  -ms-flex-direction: @v;
  flex-direction: @v;
}

.transition(@v) {
  -webkit-transition: @v;
  -moz-transition: @v;
  transition: @v;
}

.align-items(@v) {
  -webkit-box-align: @v;
  -webkit-align-items: @v;
  -ms-flex-align: @v;
  align-items: @v;
}
.justify-content(@v) {
  -webkit-justify-content: @v;
  -ms-flex-pack: @v;
  justify-content: @v;
}

.icon-right() {
  z-index: 2;
  font-size: 1em;
  display: inline-block;
  cursor: default;
  position: absolute;
  line-height: 1em;
  text-align: center;
  top: 0;
  right: 0;
  margin: 0;
  height: 100%;
  width: 2.6em;
  opacity: .5;
  border-radius: 0 @border-radius @border-radius 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;

  &:before, &:after {
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    margin-top: -.5em;
  }
}

.loading(@width, @borderWidth) {
  &:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -@width/2 0em 0em -@width/2;
    width: @width;
    height: @width;
    border-radius: 500rem;
    border: @borderWidth solid rgba(0, 0, 0, 0.1);
  }
  &:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -@width/2 0em 0em -@width/2;
    width: @width;
    height: @width;
    -webkit-animation: button-spin 0.8s linear;
    animation: button-spin 0.8s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #767676 transparent transparent;
    border-style: solid;
    border-width: @borderWidth;
    box-shadow: 0px 0px 0px 1px transparent;
  }
}