/*
  Author:   Kirill Shmakov <k0ldbl00d@gmail.com>
  Date:     2017-02-09
*/

/* VARIABLES */
@litegrey: #eee;
@red: #d22;
@blue: #28c;
@green: #2a2;
@lime: #be4;
@orange: #e80;
@black: #333;
@obsidian: #558;

@basesize: 11px;
@defaultcolor: @litegrey;

/* COMMON SETTINGS  */
input,
button,
a.button,
label
{
  font-size: @basesize;
  line-height: 2 + @basesize * 2;
  height: 4 + @basesize * 2;
  vertical-align: middle;
  outline: none;
}

label,button,input[type=button],a.button {
  cursor: pointer;
}

textarea {
  font-size: @basesize;
  font-family: monospace;
  outline: none;
}

/* EXTRA SIZES */
.smaller { font-size: @basesize * 0.8; height: 4 + (@basesize * 0.8 )*2; line-height: 2 + (@basesize * 0.8 )*2; }
.small { font-size: @basesize * 0.9; height: 4 + (@basesize * 0.9 )*2; line-height: 2 + (@basesize * 0.9)*2; }
.normal { font-size: @basesize; height: 4 + @basesize*2; line-height: 2 + @basesize*2; }
.big { font-size: @basesize * 1.2; height: 4 + (@basesize * 1.2)*2; line-height: 2 + (@basesize * 1.2 ) * 2; }
.bigger { font-size: @basesize * 1.5; height: 4 + (@basesize * 1.5)*2; line-height: 2 + (@basesize * 1.5 ) * 2; }

/* BUTTONS */
.tk-button()
{
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  height: 4 + @basesize * 2;
  line-height: 2 + @basesize * 2;
  border-width: 1px;
  border-style: solid;
  border-radius: .3em;
  outline: none;
  white-space: normal;
  text-decoration: none;
  text-align: center;
  margin: 0;
  padding: 0 .5em;
  vertical-align: middle;
  font-size: @basesize;
}

.buttoncolors(@basecolor: @defaultcolor)
{
  @lighter: hsl(hue(@basecolor),saturation(@basecolor),lightness(@basecolor)*1.4);
  @darker: hsl(hue(@basecolor),saturation(@basecolor),lightness(@basecolor)*0.8);
  background-color: @basecolor;
  background: linear-gradient(to bottom,@lighter,@darker);
  box-shadow: inset 0 0 2px @lighter*2;
  &.flat, .flat & { border: none; box-shadow: 0 0 2px alpha(@darker,.3); background: @basecolor; text-shadow: none; }
  border-color: @basecolor/1.4;
  //:not(.flat) {  }
  //text-shadow: 1px 1px 0 @darker;

  & when(lightness(@lighter) > 70%) { color: hsl(hue(@basecolor),saturation(@basecolor)*10,lightness(@lighter)-luma(@lighter)); text-shadow: 1px 1px 0 (@basecolor - #111); }
  //& when(lightness(@lighter) <= 70%) { color: hsl(hue(@basecolor),saturation(@basecolor)*2,150-lightness(@lighter)); text-shadow: 1px 1px 0 (@basecolor); }
  & when(lightness(@lighter) <= 70%) { color: rgba(255,255,255,.9); text-shadow: 1px 1px 0 @darker; }

  //& when(luma(@basecolor) > 50%) { color: hsl(hue(@basecolor),saturation(@basecolor),90-lightness(@basecolor)); text-shadow: 1px 1px 0 (@basecolor); }
  //& when(luma(@basecolor) <= 50%) { color: hsl(hue(@basecolor),saturation(@basecolor)*2,100-lightness(@basecolor)/4); text-shadow: 1px 1px 0 (@basecolor - #222); }
  &:hover {
    @lighter: hsl(hue(@basecolor),saturation(@basecolor),lightness(@basecolor)*1.6);
    @darker: hsl(hue(@basecolor),saturation(@basecolor),lightness(@basecolor));
    background: linear-gradient(to bottom,@lighter,@darker);
    &.flat, .flat & { background: linear-gradient(to bottom,@basecolor*1.1,@basecolor*1.3); box-shadow: 0 0 .2em @darker/2; }
    &:not(.flat), :not(.flat) & {
      & when(luma(@basecolor) > 50%) { text-shadow: 1px 1px 0 @basecolor + #222; }
      & when(luma(@basecolor) <= 50%) { text-shadow: 1px 1px 0 @basecolor - #222; }
    }

  }
  &:active {
    @lighter: @basecolor + #111;
    @darker: @basecolor - #111;
    :not(.flat) { box-shadow: inset 0 0 3px @basecolor/1.5; }
    .flat { background: linear-gradient(to bottom,@darker,@darker); }
  }
  &:focus {
    border-color: @basecolor/2;
  }
  &:disabled, &[disabled] {
    background: none;
    background-color: @basecolor;
    color: @basecolor/1.5;
    cursor: not-allowed;
    text-shadow: none;
    &:hover {
      text-shadow: none;
    }
  }
}

input[type=button],
input[type=submit],
input[type=reset],
button,
a.button,
select {
  .tk-button();
  .buttoncolors();
  &.red, &.warning { .buttoncolors(@red); }
  &.green, &.ok { .buttoncolors(@green); }
  &.blue { .buttoncolors(@blue); }
  &.lime { .buttoncolors(@lime); }
  &.orange { .buttoncolors(@orange); }
  &.obsidian { .buttoncolors(@obsidian); }
  &.black { .buttoncolors(@black); }

  &.smaller, .smaller & { .smaller; }
  &.small, .small & { .small; }
  &.big, .big & { .big; }
  &.bigger, .bigger & { .bigger; }
}

/* CHECKBOX, RADIO */
input[type=checkbox],
input[type=radio]
{
  width: @basesize * 1.8;
  height: @basesize * 1.8;
  line-height: @basesize * 1.8 - 2;
  &:focus {
    border-color: #48d;
    box-shadow: 0 0 5px rgba(68,136,221,.5);
  }
  .smaller & { width: 4 + (@basesize * 1.8 * 0.8); height: 4 + (@basesize * 1.8 * 0.8); line-height: 4 + (@basesize * 1.8 * 0.8); }
  .small & { width: 4 + (@basesize * 1.8 * 0.9); height: 4 + (@basesize * 1.8 * 0.9); line-height: 4 + (@basesize * 1.8 * 0.9); }
  .big & { width: 4 + (@basesize * 1.8 * 1.2); height: 4 + (@basesize * 1.8 * 1.2); line-height: 4 + (@basesize * 1.8 * 1.2); }
  .bigger & { width: 4 + (@basesize * 1.8 * 1.5); height: 4 + (@basesize * 1.8 * 1.5); line-height: 4 + (@basesize * 1.8 * 1.5); }
}

.sizes()
{
  &.smaller, .smaller & { .smaller; }
  &.small, .small & { .small; }
  &.big, .big & { .big; }
  &.bigger, .bigger & { .bigger; }
}

label {
  .sizes();
}

/* TEXT INPUTS */
.textinput(@basecolor: @defaultcolor)
{
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  box-sizing: border-box;
  background-color: #fff;
  border-color: @basecolor/1.4;
  padding: 0 .3em;
  cursor: text;

  &:disabled {
    background-color: @basecolor;
    color: @basecolor/1.5;
  }
  &:focus {
    border-color: #48d;
    box-shadow: 0 0 5px rgba(68,136,221,.5);
  }
}



input[type=text],
input[type=password],
input[type=date],
input[type=time]
{
  .textinput();
  .sizes();
}

textarea {
  .textinput();
  padding: .3em;
}

:disabled, .disabled, [disabled] {
  cursor: not-allowed!important;
  text-shadow: none;
}

div.toolstrip {
  margin: 10px 0;
}


.control-group {
  display: inline-block;
  vertical-align: middle;
}

.control-group a, .control-group button, .control-group input, .control-group select {
  float: left;
  border-radius: 0px;
  margin-left: -1px;
}

.control-group > :nth-child(1) {
  border-right-style: none;
}

.control-group :first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: 0;
}

.control-group > :last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-right-style: solid;
}