@import "comap/core/variables.less";
@import "comap/core/mixins.less";

// Custom colors
@primary-color: 		#d50000;
@primary-text-color: 		#ffffff;
@secondary-color: 		#484848;
@secondary-text-color: 		#ffffff;

//@sidebar-color: 			@neutral-color; //dark scheme

@link-color: 			@primary-color;
@link-color-hover: 		lighten(@primary-color, 10%);

// Buttons
@button-text-color: 	@primary-text-color;
@button-gradient-1: 	@primary-color;
@button-gradient-2: 	lighten(@primary-color, 3%);
@button-gradient-3: 	lighten(@primary-color, 6%);

/* -------------------------------------------------------- */
body {
  // base.less
  a.icon-link:hover .svg-icon {
    color: @primary-color;
  }
  // forms-and-buttons.less
  .button,
  button {
    color: @button-text-color;
    .gradient(@button-gradient-2, @button-gradient-1);
  }

  input {
    &[type="submit"],
    &[type="reset"],
    &[type="button"] {
      color: @button-text-color;
      .gradient(@button-gradient-2, @button-gradient-1);
    }
  }

  .button:hover,
  button:hover,
  .button:focus,
  button:focus {
    color: @button-text-color;
    .gradient(@button-gradient-3, @button-gradient-2);
  }

  input {
    &[type="submit"]:hover,
    &[type="reset"]:hover,
    &[type="button"]:hover,
    &[type="submit"]:focus,
    &[type="reset"]:focus,
    &[type="button"]:focus {
      color: @button-text-color;
      .gradient(@button-gradient-3, @button-gradient-2);
    }
  }

  .combo-button {
    span.icon {
      color: @button-text-color;
      .gradient(@button-gradient-2, @button-gradient-1);
    }

    &:hover, &:active, &:focus {
      color: @primary-color;

      .icon {
        .gradient(@button-gradient-3, @button-gradient-2);
      }
    }
  }
  //loader.less
  @keyframe-0-bgr: @primary-color;

  @keyframes fading {
    0% {
      background-color: @keyframe-0-bgr;
    }
  }

  @-o-keyframes fading {
    0% {
      background-color: @keyframe-0-bgr;
    }
  }

  @-ms-keyframes fading {
    0% {
      background-color: @keyframe-0-bgr;
    }
  }

  @-webkit-keyframes fading {
    0% {
      background-color: @keyframe-0-bgr;
    }
  }

  @-moz-keyframes fading {
    0% {
      background-color: @keyframe-0-bgr;
    }
  }
  //map.less
  .map-controls {
    > div {
      /*color: @primary-text-color;
      .gradient(lighten(@primary-color, 3%), @primary-color);

      &:hover {
        .gradient(lighten(@primary-color, 6%), lighten(@primary-color, 3%));
      }*/
    }
  }
  // log-in-out.less
  .button-box a {
    color: @primary-text-color;
    background-color: @primary-color;
    border: solid 1px darken(@primary-color, 15%);

    &:hover {
      color: @primary-text-color;
      background-color: lighten(@primary-color, 10%);
      border: solid 1px darken(@primary-color, 10%);
    }
  }
  // settings.less
  .block-title {
    color: @primary-color;
    border-left: solid 5px @primary-color;
  }
  // header.less
  .main-header-container,
  .navigation nav a {
    .gradient(@secondary-color, darken(@secondary-color,5%));
  }

  .header-user-box,
  .header-user-box a {
    color: @secondary-text-color;
    .gradient(darken(@secondary-color,10%), darken(@secondary-color, 20%));
  }

    .main-header-container,
    .navigation nav a,
    .header-user-box,
    .header-user-box a {
      border-bottom: solid 4px @primary-color;
    }

  .navigation nav {
    a {
      opacity: 0.85;
      color: @secondary-text-color;

      &:hover {
        opacity: 1;
        color: @secondary-text-color;
        .gradient(lighten(@secondary-color, 10%), @secondary-color);
      }
    }

      a.active-menu-item {
        opacity: 1;
        color: @primary-text-color;
        .gradient(lighten(@primary-color, 3%), @primary-color);
      }
  }

    .navigation nav ul ul {

      a {
        opacity: 1;
        border-color: lighten(@secondary-color, 20%);

        &.active-menu-item {
          color: @secondary-text-color;
          .gradient(lighten(@secondary-color, 15%), lighten(@secondary-color, 5%));
        }
      }
    }

  .header-user-box {
    li:first-child {
      border-right: 1px solid @secondary-text-color;
    }

    .stacked-icon .icon-front {
      stroke: darken(@secondary-color, 15%);
    }

    a {
      &:hover {
        .gradient(lighten(@primary-color, 3%), @primary-color);
      }

        &:hover, &:hover .svg-icon {
          color: @primary-text-color;
        }
    }
  }

  .global-alerts {
    color: @secondary-text-color;

    .svg-icon {
      opacity: 0.85;
    }

    .alerts-number {
      border: solid 2px @secondary-color;
    }

    &:hover {
      color: @secondary-text-color;
      .gradient(lighten(@secondary-color, 10%), @secondary-color);

      .svg-icon {
        opacity: 1;
      }

      .alerts-number {
        border-color: lighten(@secondary-color, 7%);
      }
    }
  }
  //responsive-menu.less
  @media screen and (max-width: 1150px) {
    @united-header-color: darken(@secondary-color, 15%);

    .main-header-container {

      nav,
      .header-user-box {

        &.show {
          background-color: @united-header-color;
        }
      }

        nav.show {

          li {
            float: none;
            border-bottom: dotted 1px lighten(@secondary-color, 0%);
          }

          a {
            color: @secondary-text-color;
            background: @united-header-color;

            &:hover {
              color: @secondary-text-color;
              .gradient(@secondary-color, darken(@secondary-color, 10%));
            }
          }

            a.active-menu-item {
              color: @primary-text-color;
              .gradient(lighten(@primary-color, 3%), @primary-color);
            }

          ul ul {
            .box_shadow(0,0,0,0,0);
          }

            ul ul a.active-menu-item {
              color: @secondary-text-color;
              .gradient(lighten(@secondary-color, 7%), darken(@secondary-color, 5%));
            }
        }

        .header-user-box.show li {
          background: @united-header-color;

          &:first-child {
            border-bottom: 1px solid lighten(@secondary-color, 20%);
          }
        }
    }

    .responsive-nav {
      color: @secondary-text-color;

      .stacked-icon .icon-front {
        stroke: @secondary-color;
      }

      &:hover {
        background: @primary-color;

        .stacked-icon .icon-front {
          stroke: @primary-color;
        }
      }

      &.show {
        background-color: @united-header-color;

        .stacked-icon .icon-front {
          stroke: @united-header-color;
        }

        &:hover .stacked-icon .icon-front {
          stroke: @united-header-color;
        }
      }
    }
  }

  .gradient(@from: #ffffff, @to: darken(#ffffff,3%) ) {
    background: @to;
    background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
    background: -webkit-linear-gradient(@from, @to);
    background: -moz-linear-gradient(center top, @from 0%, @to 100%);
    background: -moz-gradient(center top, @from 0%, @to 100%);
    background: -o-linear-gradient(top, @from, @to);
    background: linear-gradient(top, @from, @to);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@from, endColorstr=@to)";
  }

  .ol-control button {
    background-color: @primary-color;

    &:focus, &:hover {
      .gradient(lighten(@primary-color, 6%), lighten(@primary-color, 3%));
    }
  }
  // layout.less ???
  /*
.sidebar-heading {
		background-color: darken(@secondary-color, 10%);
	
	h2, .title, button, .close-button {
		color: @secondary-text-color;

		&:hover, &:focus, &:active {
			color: @secondary-text-color;
		}
	}
}
*/
}

.about .branding {
  background: @primary-color url(../images/wsv-symbol-white.svg) no-repeat!important;
  background-position: 40px 90%;
}

@media screen and (max-width: 1150px) {
  body {
    /* podbarveni tlacitek menu */
    .responsive-nav {
      &.toggle-user, &.toggle-menu {
        &.mobile-active {
          background: @primary-color;
        }
      }
    }
    /* podbarveni polozek v menu */
    .main-header-container nav.show a.active-menu-item {
      background: @primary-color;
    }
    
    /* efekt animace pro tlacitka - jen u mobilnich zarizeni */
    .mobile-device {
      .responsive-nav {
        &.toggle-user.mobile-active {
          background: @primary-color;
        }

        &.toggle-menu.mobile-active {
          background: @primary-color;
        }
      }

    }
  }
}

body {
  .views-container,
  .login-page {
    //links
    .navigation, .header-user-box, .form-wrapper .whole-button {
      a:not([href]):not([tabindex]) {
        color: @primary-text-color!important;
      }

        a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus,
        a:hover {
          color: @primary-text-color!important;
        }
    }

    a:not([href]):not([tabindex]):not(.add-new-button):not(.icon-button):not(.dropdown-toggle-scrollable):not(.wsv-title):not(.add-to-favorite):not(.show-values-list) {
      color: @primary-color;
    }

    .view-panel-container a.button:not(.button.grey),
    .view-panel-container a.button:hover:not(.button.grey) {
      color: @primary-text-color;
    }

    .sidebar-list.dark-scheme ul li {
      a:not([href]):not([tabindex]), a:hover {
       // color: @primary-text-color!important;
      }
    }
  }

  a:not([href]):not([tabindex]).add-new-button {
    color: @primary-text-color!important;
  }

  .settings-control-buttons button {
    color: @primary-text-color;
  }

  .sidebar-list ul li.active-list-item {
    //color: @primary-text-color;
  }

  #downloads .report-button,
  #downloads .history-button {
    color: @primary-text-color;
  }
  
  .table-filter-sort .pagination .tg-pagination-div button {
    background: @primary-color;
  }

  .feedback-title{
    color: @primary-color; 
  }
  .feedback-choice {
    border-left: solid 5px @primary-color; ;
  }
}

body {
  .login-page {
    a:not([tabindex]):not(.add-new-button):not(.icon-button):not(.dropdown-toggle-scrollable):not(.wsv-title):not(.add-to-favorite):not(.show-values-list) {
      color: @primary-color;
    }

    .form-wrapper .whole-button a.black:not([href]):not([tabindex]) {
      color: #ffffff !important;
    }

    .form-wrapper .whole-button a.black:hover {
      color: #ffffff !important;
    }
  }
}

.tabs-wrapper.unit-detail-grid {
  .tabs-control .tab-control {
    button {
      background-color: @primary-color;

      &:hover {
        .gradient(@button-gradient-3, @button-gradient-2);
      }
    }

    button.disabled {
      cursor: auto;
      background-color: #999999;
      background: #999999;

      &:hover svg {
        background: #999999;
      }
    }

    button svg {
      fill: @primary-text-color;
    }
  }
}