/*!
 * Shore Bootstrap 3 Theme
 * Copyright 2015 Shore GmbH
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

//
// Load and theme awesome-bootstrap-checkbox
// --------------------------------------------------

@import "awesome-bootstrap-checkbox.less";
@font-family-icon: "shore-icons";
@fa-var-check: "\e03b";

// fix checkbox check icon placement and color
.checkbox label::after {
  font-size: 9px;
  padding-left: 4px;
  padding-top: 3px;
  color: inherit;
}
// fix border color
.radio label::before,
.checkbox label::before {
  border-color: @gray-line;
}
// fix color of active default radio check "icon"
.radio label::after {
  background-color: @gray-text;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
  cursor: pointer;

  // fix disabled opacity
  &:disabled + label {
    cursor: @cursor-disabled;
    .opacity(@disabled-opacity);
  }
  // fix outline style for radios (circle)
  &:focus + label::before {
    outline: none;
    box-shadow: 0 0 3pt 1pt @brand-primary;
  }
}

//
// Load and theme Shore icon font
// --------------------------------------------------

@import "shore-icons.less";
// NOTE fix font paths
@font-face {
  font-family: "shore-icons";
  src:url("@{icon-font-path}shore-icons.eot");
  src:url("@{icon-font-path}shore-icons.eot?#iefix") format("embedded-opentype"),
    url("@{icon-font-path}shore-icons.woff") format("woff"),
    url("@{icon-font-path}shore-icons.ttf") format("truetype"),
    url("@{icon-font-path}shore-icons.svg#shore-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="shore-icon-"],
[class*=" shore-icon-"] {
  position: relative;
  top: 3px;
  display: inline-block;
  margin-top: -2px;
  line-height: 1;
  font-size: larger;
}

// spin the spinner
@keyframes shore-spin {
  100% {
    transform: rotate(360deg);
  }
}
.shore-icon-backend-spinner {
  &:before {
    animation: shore-spin 2s infinite linear;
    display: inline-block;
  }
}

// font weight of h1 & h2 should be lighter
h1, .h1,
h2, .h2 {
  font-weight: bold;
}
// font color of h5 is an exception
h5, .h5 {
  color: @brand-primary;
  font-weight: bold;
}

// labels with normal font weight
.label {
  font-weight: normal;
  margin-bottom: 3px;
}

// strong font weight a bit lighter pls
strong {
  font-weight: 600;
}

// progress bar
.progress {
  height: 3px;
  .box-shadow(none);
}
.progress-bar {
  line-height: 3px;
  .box-shadow(none);
}
.progress-striped .progress-bar,
.progress-bar-striped {
  #gradient > .striped(rgba(255,255,255,.4));
  background-size: 40px 40px;
}

// list group - show hover bg even for active items
.list-group-item {
  &.active:hover,
  &.active:focus {
    background-color: @list-group-hover-bg;
  }
}
// lengend & list group heading *CUSTOM ELEMENT*
legend,
.list-group-heading {
  position: relative;
  display: block;
  padding: 7px 15px;
  background-color: @gray-bg;
  border: 1px solid @list-group-border;
  color: @gray-text;
  font-size: 11px;
  text-transform: uppercase;
}
legend {
  margin-bottom: @form-group-margin-bottom;
  border-right: none;
  border-left: none;
}
.list-group-heading {
  // Place the border on the list items and negative margin up for better styling
  margin-bottom: -1px;
}
// list group - not borders on the left and right side
.list-group-heading,
.list-group-item {
  border-right: none;
  border-left: none;
}

// disabled list group item with opacity
.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  .opacity(@disabled-opacity);
}

// panel without border
.panel {
  border: none;
}
// custom box shadow for panels
.panel {
  .box-shadow(0 2px 6px rgba(0,0,0,.08));
}
// panel title with uppercase text and small font size
.panel-title {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
}
// panel title text color of default panel with primary brand color
.panel-default .panel-title {
  color: @brand-primary;
}
// panel footer default color
.panel-footer {
  color: @gray-mute;
}
// panel variant overlays - are placed fixed on the lower right corner of the screen
.panel-overlay {
  .panel-variant(@panel-overlay-border; @panel-overlay-text; @panel-overlay-heading-bg; @panel-overlay-border);
}
.panel-overlay {
  // top border radius needs to be bigger than of panel-heading
  // so that panel bg doesn't shine through
  border-top-left-radius: @panel-border-radius * 2;
  border-top-right-radius: @panel-border-radius * 2;

  // no bottom border radius
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  // no margins when used as overlay
  margin: 0;
}
// expand legend inside panel body
.panel-body legend {
  margin-left: -@panel-body-padding;
  margin-right: -@panel-body-padding;
  box-sizing: content-box;
}

// well without box-shadow and border-radius
.well {
  .box-shadow(none);
  border-radius: 0;
}

// nav items links should be gray and switch to blue on hover without bg
.nav > li > a {
  color: @gray-dark;
  &:hover,
  &:focus {
    background-color: inherit;
    color: @brand-primary;
  }
}

// nav pills should look like button groups
.nav-pills > li {
  > a {
    border-radius: 0;
    border: 1px solid @gray-divisor;
    border-top-color: @brand-secondary;
    border-bottom-color: @brand-secondary;
    padding: 6px 15px;
    font-size: 13px;
  }
  &:first-child > a {
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }
  &:last-child > a {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }
  > a, > a:hover, > a:focus {
    color: white;
    background-color: @brand-secondary;
  }
  > a:hover, > a:focus {
    background-color: darken(@brand-secondary, 10%);
  }
  + li {
    margin-left: -1px;
  }

  // Active state
  &.active > a {
    background-color: white;
    &,
    &:hover,
    &:focus {
      border-top-color: @gray-divisor;
      border-bottom-color: @gray-divisor;
      color: @gray-dark;
    }
    &:hover,
    &:focus {
      background-color: darken(white, 10%);
    }
  }

  // Disabled state
  &.disabled > a {
    &,
    &:hover,
    &:focus {
      border-top-color: @gray-divisor;
      border-bottom-color: @gray-divisor;
      color: @gray-light;
      background-color: inherit;
    }
  }
}

// nav tabs
.nav-tabs {
  border: none;
  > li {
    > a {
      padding: 13px 30px;
      border: none;
      border-bottom: 1px solid @gray-line;
    }
    &.active > a {
      &,
      &:hover,
      &:focus {
        padding: 13px 30px 12px 30px;
        border: none;
        border-bottom: 2px solid @brand-primary;
      }
    }
    &.disabled > a {
      border: none;
      border-bottom: 1px dotted @gray-line;
    }
  }
}

// badge font size smaller
.badge {
  font-size: 10px;
  padding: 2px 6px;
}

// badges inside nav
.nav > li {
  > a > .badge {
    margin-left: 0;
    vertical-align: inherit;
    font-size: 12px;
    background: transparent !important;
    color: lighten(@gray-text, 10%) !important;
    padding: 0;
    &::before {
      content: "(";
    }
    &::after {
      content: ")";
    }
  }
  &.disabled {
    > a > .badge {
      color: @gray-light !important;
    }
  }
}

// dropdowns
.dropdown-menu {
  .box-shadow(0 2px 6px rgba(0,0,0,.12));
  border-radius: 0;
  padding: 10px 0;
}

// breadcrumb
.breadcrumb {
  border-radius: 0;
  font-size: 11px;
  text-transform: uppercase;
}

.panel .panel-heading .breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: inherit;
  li { color: inherit; }
  a { color: inherit; }
  > li + li:before {
    color: inherit;
  }
}

// images / placeholders
.placeholder-marked,
.img-marked {
  border: 2px solid @brand-primary;
}
.placeholder {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.placeholder-shore {
  background-image: data-uri('image/svg+xml;base64', '../images/placeholder-shore.svg');
}
.placeholder-businessman {
  background-image: data-uri('image/svg+xml;base64', '../images/placeholder-businessman.svg');
}
.placeholder-male {
  background-image: data-uri('image/svg+xml;base64', '../images/placeholder-male.svg');
}
.placeholder-female {
  background-image: data-uri('image/svg+xml;base64', '../images/placeholder-female.svg');
}
.placeholder-location {
  background-image: data-uri('image/svg+xml;base64', '../images/placeholder-location.svg');
}

// change button disabled opacity
.btn {
  .transition(opacity ease-in-out .15s);
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
    .opacity(@disabled-opacity);
    text-decoration: none;
  }
}

// icon button (with badge)
.btn-icon {
  position: relative;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
  > [class^="shore-icon-"],
  > [class*=" shore-icon-"] {
    top: 1px;
    color: @gray-dark;
    font-size: 24px;
    display: block;
    height: 34px;
    width: 34px;
    padding: 5px;
  }
  &:not([disabled]) {
    &:hover, &:focus {
      > [class^="shore-icon-"],
      > [class*=" shore-icon-"] {
        color: @brand-primary;
      }
    }
  }
  > .badge {
    position: absolute;
    left: 18px;
    top: 2px;
  }
}

.btn-mute {
  .button-variant(@btn-mute-color; @btn-mute-bg; @btn-mute-border);
}

// Caret
.caret {
  // reset
  display: inline;
  margin: 0;
  width: auto;
  height: auto;
  vertical-align: inherit;
  border: none;

  // use shore-icon instead
  &:before {
    content: "\e015";
    font-family: "shore-icons";
    font-size: 22px;
    line-height: 4px;
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    margin-left: -5px;
    margin-right: 5px;
    .opacity(.7);
  }
}

// close button
.close {
  font-size: medium;
  .opacity(.65);

  &:hover,
  &:focus {
    .opacity(1);
  }
}

// fix position of close button in panel heading
.panel-heading .close {
  margin-top: -5px;
}

// tooltip without rounded corners
.tooltip-inner {
  border-radius: 0;
}

// alert dismissible close button position fix
.alert-dismissable .close, .alert-dismissible .close {
  top: 0;
}

// popover styles
.popover {
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  .popover-title {
    border-color: @gray-divisor;
    color: @brand-primary;
    font-weight: normal;
    padding: 17px 19px 15px 19px
  }
  .popover-content {
    padding: 17px 19px;
  }
}

// blockquote style
.blockquote-reverse,
blockquote.pull-right,
blockquote {
  // font light and italic
  font-style: italic;
  font-weight: 200;
  // smaller border
  border-width: 2px;
  // reduce top/bottom padding
  padding: 0 @line-height-computed;
  // remove line from footer
  footer,
  small,
  .small {
    font-style: normal;
    &:before {
      content: '';
    }
  }
}

// table header styles
.table > thead > tr > th {
  border-bottom-width: 1px;
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
  background-color: @gray-bg;
  color: @gray-text;
}

// table first/last cell padding
.table:not(.table-bordered) {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th:first-child,
      > td:first-child {
        padding-left: (@table-cell-padding * 2);
      }
      > th:last-child,
      > td:last-child {
        padding-right: (@table-cell-padding * 2);
      }
    }
  }
}
.table-condensed:not(.table-bordered) {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th:first-child,
      > td:first-child {
        padding-left: (@table-condensed-cell-padding * 2);
      }
      > th:last-child,
      > td:last-child {
        padding-right: (@table-condensed-cell-padding * 2);
      }
    }
  }
}

// text input label
.control-label {
  font-size: 13px;
  font-weight: normal;
  color: @gray-text;
  margin-bottom: 0;
  .transition(~"color ease-in-out .15s");

  &.form-control-has-focus {
    color: @brand-primary;
  }

  .has-success & {
    color: @state-success-text;
  }
  .has-warning & {
    color: @state-warning-text;
  }
  .has-error & {
    color: @state-danger-text;
  }
}

// floating text input label
.floating-label-control {
  position: relative;
  padding-top: 12px;

  .control-label {
    position: absolute;
    top: 0;
    .transition(~"all ease-in-out .15s");
  }

  &:not(.has-value) {
    .control-label {
      font-size: inherit;
      top: 19px;
    }
  }
}

// form text input
.form-control {
  border-top: none;
  border-left: none;
  border-right: none;
  .box-shadow(none);
  &:focus {
    .box-shadow(none);
    border-width: 2px;
    padding-bottom: 5px;
  }
  &[disabled] {
    .opacity(.5);
  }
  padding: 6px 0;
}
.input-group-addon {
  border: none;
  color: @gray-mute;
  background-color: white !important;
}

// help block with smaller font size
.help-block {
  font-size: 11px;
  color: @gray-mute;
}

// fix vertical control label position for horizontal forms
.form-horizontal {
  @media (min-width: @screen-sm-min) {
    .control-label {
      text-align: right;
      margin-bottom: 0;

      // Default padding plus a border plus extra padding
      padding-top: (@padding-base-vertical + 1 + 2);
    }
  }
}

// fix positioning and size of form-control-feedback icon
.has-feedback label ~ .form-control-feedback {
  top: 29px;
}
.has-feedback .form-control-feedback {
  position: absolute;
  font-size: 140%;
}

// remove inset shadow for active buttons
.btn:active, .btn.active {
  .box-shadow(none);
}

// fix button default hover and active style
.btn-mute,
.btn-default {
  &.focus,
  &:focus,
  &.focus.active,
  &.focus:active,
  &:focus.active,
  &:focus:active,
  &.active,
  &:active,
  &:active:hover,
  &.active:hover,
  &:hover {
    color: darken(@brand-primary, 5%);
    border-color: darken(@brand-primary, 5%);
  }
}

// darken alert success text color
.alert-success {
  color: darken(@brand-success, 5%);
}

// add icon hover to navbar toggle
.navbar-toggle {
  &:hover,
  &:focus {
    .icon-bar {
      background-color: @brand-primary;
      .navbar-inverse & {
        background-color: white;
      }
    }
  }
}

// flex form inline / flex row (custom)
.flex-row,
.flex-form-inline {
  display: table;
  width: 100%;
  .flex-cell {
    width: 1%;
    display: table-cell;
    white-space: nowrap;
    &.flex-spread {
      width: 100%;
    }
  }
}

// flex form inline uses padding between cells
.flex-form-inline {
  .flex-cell {
    padding-right: @padding-base-horizontal;
    &:last-child {
      padding-right: 0;
    }
  }
}

// flex form inline form-controls inside panel footer without bottom border and background
.panel-footer .flex-form-inline .form-control {
  border-bottom-color: transparent;
  background: transparent;
}

// just show node if parent gets hover
.show-on-parent-hover {
  visibility: hidden;
  *:hover > & {
    visibility: visible;
  }
}