/* Filter */

@import 'utils/fx-functions';
@import 'utils/fx-mixins';
@import 'utils/fx-utils';

@import 'themes/fx-bootstrap-queries';
@import 'themes/fx-material-theme-light';
@import 'themes/fx-variables';


@import 'base/fx-buttons';
@import 'base/fx-fonts-import';
@import 'base/fx-icons';
@import 'base/fx-jstree';

@import 'base/fx-radio-checkbox';
@import 'base/fx-typography';


$controller-width: 105px;
$controller-width-xs: 50px;
$controller-elements-background: #bdbdbd;


// Standard Fenix Theme


.fx-text-primary-color{
  color: $fx-cool-blue;
}

.fx-background-color-primary-color{
  background-color: $fx-cool-blue;
}


.fx-button-primary-color {
  color: white;
  border-color: darken($fx-cool-blue, 10%);
  background-color: $fx-cool-blue;

  &:hover {
    color: white;
    border-color: darken($fx-cool-blue, 10%);
    background-color: darken($fx-cool-blue, 5%);
  }

  &:focus {
    color: white;
    border-color: darken($fx-cool-blue, 20%);
    background-color: darken($fx-cool-blue, 15%);
  }

}


//// Filter


.fx-selector.hideSwitch{


  .fx-selector-title{
    margin-right: 30px;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: $screen-sm-min) {



    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: $screen-md-min) {

      margin-right: 30px;

    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: $screen-lg-min) {  }



  }


}


.fx-selector.hideRemoveButton{


    .fx-selector-title{
      margin-right: 30px;

      /* Small devices (tablets, 768px and up) */
      @media (min-width: $screen-sm-min) {



      }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: $screen-md-min) {

        margin-right: 80px;

      }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: $screen-lg-min) {  }


    }


  }


.fx-selector.hideSwitch.hideRemoveButton{


  .fx-selector-title{
    margin-right: 0;

    /* Small devices (tablets, 768px and up) */
    @media (min-width: $screen-sm-min) {



    }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: $screen-md-min) {

      margin-right: 0;

    }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: $screen-lg-min) {  }



  }


}


.fx-selector.hideSwitch.hideRemoveButton{

}

[data-selector], [data-group]{


  .controller{
    position: absolute;
    right: 0;
    top: 17px;

    input[type="checkbox"] + label  {

      &:before{
        @include fx-border-radius(50% !important); //The only checkbox with round corners

      }

    }


      .btn-round{
        @include fx-border-radius(50% !important);
    }


  }


  /* Focused */

  /* Mandatory */

  /* Disabled */

  & .disabled{
    cursor:no-drop;
    opacity: 0.4;
  }




  /* Hovered */

  @media screen and (max-width: $screen-xs) {



    .controller{
      opacity:1;
      pointer-events: auto;

    }


  }


  @media screen and (min-width: $screen-sm) {

    &{
      .controller{
        opacity:0;
        pointer-events: none;
        @include animate(0.3s, 0.2s);
      }
    }

    &:hover{
      .controller{
        opacity:1;
        pointer-events: auto;
      }
    }




  }

  @media screen and (min-width: $screen-md) {

  }
  @media screen and (min-width: $screen-lg) {

  }




}








.selector-header{
  padding: 10px 0;
  position: relative;


}

.fx-selector-title{
  margin-right: $controller-width-xs;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: $screen-sm-min) {



  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: $screen-md-min) {

    margin-right: $controller-width;

  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: $screen-lg-min) {  }



}


.filter-enabled-label{

  width: 10px;
  font-size: 0;


  /* Small devices (tablets, 768px and up) */
  @media (min-width: $screen-sm-min) {



  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: $screen-md-min) {


    width: auto;
    font-size: inherit;

  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: $screen-lg-min) {  }



}

.fx-enabled-switch{

}


.selector-footer{

  [data-role="summary"]{
    margin: 0;
  }

}



[data-code]{
  display: inline-block;
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 1px 3px;
  background-color: $summary-bg;
  @include fx-border-radius(3px);
}

.code-brk {
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 10px;
  color: $fenix-secondary-text;
}

/* Buttons */

.btn{
  //@include fx-no-border-radius;
}

.btn-default{
  color: $fenix-text;
}

[data-role="remove"].btn-round{

  position: relative;
  top: -2px;

}


/* Tree */

.tree-holder{
  height: 150px;
  overflow: auto;
}

.fx-tree-search{
  margin-bottom: 5px;
}

.fx-tree-buttons{
  margin-bottom: 5px;
}

.jstree-anchor,.jstree-anchor:link,.jstree-anchor:visited,.jstree-anchor:hover,.jstree-anchor:active{
  color: $fenix-text;
}


/* Range Slider */

.irs-bar, .irs-bar-edge, .irs-line{
  height: 5px;
  top: 37px;
}


.irs-bar {
  border-top: 1px solid $fx-cool-blue;
  border-bottom: 1px solid $fx-cool-blue;
}


.irs-bar-edge{
  border: 1px solid $fx-cool-blue;
}


.irs-bar, .irs-bar-edge{
  background: $fx-cool-blue;
}

.irs-line{
  background: $controller-elements-background;
  border-color: transparent;
}

.irs-slider{
  background: white;
  @include fx-noshadow;
}

.irs-from, .irs-to, .irs-single {
  background: transparent;
  color: $fx-cool-blue;
}

/* Time */




.time-selector-icon{
  font-size: 20px;
}

[data-selector-time]{



  .day{

    &.active{
      background-color: $fx-cool-blue;

      &:hover{
        background-color: desaturate( $fx-cool-blue, 50% );
      }

    }

    &.today{
      &:before{
        border-bottom-color: $fx-cool-blue;
      }
    }




  }


  .month{

    &.active{
      background-color: $fx-cool-blue;
    }



  }

  .year{

    &.active{
      background-color: $fx-cool-blue;
    }



  }




  .fx-time-addon {
    font-size: 24px;
    padding: 2px 8px;
    color: $fx-cool-blue;
  }



  [data-action="incrementHours"], [data-action="decrementHours"],[data-action="incrementMinutes"],[data-action="decrementMinutes"]{
    font-size: 24px;
    color:$fx-cool-blue;
  }


  .bootstrap-datetimepicker-widget table thead tr:first-child th:hover{
    //background: none !important;
    //@extend .fx-icon;
  }




  [data-action="previous"], [data-action="next"]{


    //background: url("#{$fx-ui-common}/css/img/fenix-catalog-sprite-small.svg") 150px 30px no-repeat;
    //display: block;
    //
    //height: 15px;
    //width: 15px;
    //position: relative;
    //left: 10px;
    //top: 5px;

    &:hover{
      //background-color: $fenix-light-gray !important;
      //background: url("#{$fx-ui-common}/css/img/fenix-catalog-sprite-small.svg") 150px 30px no-repeat;


    }

    span{
      @extend .fx-icon;




      &:before{
        content: none;



      }
    }


  }


  [data-action="next"]{
    span {
      background-position: -135px 0;
    }

  }

  [data-action="previous"]{

    span {
      background-position: -135px -15px;
    }

  }





  [data-action="togglePicker"]{
    padding: 0;

    span{
      font-size: 24px;
      color:$fx-cool-blue;
      line-height: 35px !important;
      height: auto !important;


    }



  }




  [data-action="incrementHours"]{

  }

  [data-action="decrementHours"]{

  }

  [data-action="incrementMinutes"]{

  }

  [data-action="decrementMinutes"]{

  }



}


/* Sortable */

.filter-sortable-list{

  .list-selector{
    cursor: pointer;
    margin: 3px;
    padding: 1px 3px;
    background-color: $summary-bg;
    @include fx-border-radius(3px);

  }

}

[data-sortable-group] ul.filter-sortable-list {
  //position: relative;
  min-height: 50px;
  //border:1px solid $superlight-gray
  padding: 6px 12px;
  @include fx-box-shadow(0px, 1px, 1px, rgba(0,0,0,.075), true);
  @include fx-border-radius(4px);
  background-color: white;
  background-image: none;
  border: 1px solid $fenix-hr;
}


.fx-group-item{
  padding: 0 15px;
  margin-bottom: 20px;
}

.fx-boxed {
  border: 1px solid #ccc;
}

[data-group]{
  padding: 0 15px;

}

[data-group] .controller{
  opacity: 1;
}

.jstree-default .jstree-last{
  // review to apply only to specific element (fenix-ui-filter-utils)
  background: none;
}

.selectize-dropdown {
  z-index: 1200;
}