@import “vars.scss”; @import “components.scss”;

body {

margin:0;

}

*, *:before, *:after {

box-sizing: inherit;

}

.sk-layout {

box-sizing: border-box;
background: $sk-layout-background;
font-family: $sk-font-family;

&__top-bar {
  background: $sk-primary-theme-color;
  height:60px;
  position: fixed;
  top: 0;
  left:0;
  right:0;
  width: 100%;
  padding:10px 0;
  z-index:100;
  display:flex;
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

&__body {
  display:flex;
  margin:60px auto 0;
  min-width:600px;
}

&__filters {
  background:$sk-layout-panel-background;
  padding:15px;
  margin:15px 0 15px 15px;
  flex:0 0 246px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);

  .sk-refinement-list,
  .sk-range-filter,
  .sk-hierarchical-menu-list,
  .sk-numeric-refinement-list,
  .sk-hierarchical-refinement-list {
    margin-bottom:20px;
  }

  .sk-select {
    width:100%;
  }

  .sk-range-input {
    margin-top:10px;
  }

  // .sk-selected-filters {
  //   flex-flow: column nowrap;
  //   &-option {
  //     margin-right:0;
  //     margin-bottom:10px;
  //   }
  // }
}

&__results {
  background:$sk-layout-panel-background;
  margin:15px 15px 15px 15px;
  flex:auto;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
  min-height:600px;
}

}

.sk-top-bar {

&__content {
  display:flex;
  margin:0 auto;
  padding:0 15px;
  width:100%;
}

}

.sk-layout {

&__size-l {
  .sk-top-bar__content {
    width:1280px;
  }

  .sk-layout__body {
    max-width:1280px;
  }
}

&__size-m {

  .sk-top-bar__content {
    width:960px;
  }

  .sk-layout__body {
    max-width:960px;
  }

}

}

.sk-action-bar {

display:flex;
flex-flow: column wrap;
margin:0 15px 15px;

&-row {
  display:flex;
  flex-flow: row wrap;
  margin:0px 0 10px;

  &:last-child {
    margin:0;
  }
}

.sk-hits-stats {
  line-height: 30px;
}

}

.sk-results-list {

padding:15px 0;

}

// components

.sk-search-box {

background: rgba(255,255,255,.15);
border-radius: $sk-border-radius;
position: relative;
display: flex;
flex:1;

&.is-focused {
  background:white;
}

&.is-focused &__text {
  color:$sk-text-color;
}

&.is-focused &__text::-webkit-input-placeholder  {
  color:$sk-text-color;
  font-weight:$sk-light-weight;
}

form {
  width:100%;
}

&__text {
  background:transparent;
  color:#fff;
  font-size:16px;
  padding-left:10px;
  &::-webkit-input-placeholder  {
    color:rgba(255,255,255,1);
    font-weight:100;
  }
}

&__icon {
  margin:10px 0 0 15px;
}

&__action {
  display:none;
}

}

.sk-hits-stats {

align-self: flex-start;
flex:1;

}

.sk-sorting-selector {

flex:200px 0 0;
select {
  width:200px;
}

}

.sk-range-filter {

.rc-slider-handle {
  border-color: $sk-primary-theme-color;
}
.rc-slider-track {
  background-color: rgba(156, 162, 153, 0.5);
}

}

.sk-reset-filters {

border:none;
display:flex;
font-size:14px;
margin:0;
padding-left:0;

}

.sk-pagination-navigation {

width:300px;
margin:10px auto;

&.is-numbered {
  width:600px;
}

}

.sk-pagination-select {

margin: 10px auto;
text-align:center;

}

.sk-hits-grid, .sk-hits-list {

margin:0 15px 20px;

}

.sk-hits-grid {

display:flex;
flex-flow: row wrap;
align-items: flex-start;

&__no-results {
  text-align:center;
  margin-top:60px;
}

&__item {
  flex:1 1 250px;
  display:flex;
  margin-bottom:20px;
}

}

.sk-hits-grid-hit {

padding:10px;
max-width:250px;
flex-flow: column nowrap;
align-content: center;
align-items: center;
flex: 190px 0 0;

em {
  background:yellow;
}

a {
  text-decoration: none;
  color: $sk-action-text-color;
}
&__title {
  margin-top:10px;
  font-size:14px;
}

}

.sk-hits-list {

display:flex;
flex-flow: column wrap;
align-items: flex-start;

em {
  background:yellow;
}

a {
  text-decoration: none;
  color: $sk-action-text-color;
}

&__no-results {
  text-align:center;
  margin-top:60px;
}

&__item {
  display:flex;
  margin-bottom:20px;
}

}

.sk-hits-list-hit {

display:flex;

&__poster {
  width:200px;
  flex:0 0 200px;
  padding:0px 20px;

  img {
    max-width:100%;
    margin:0 auto;
  }

}

&__details {
  flex:1 0 0;
  padding:10px;
}

&__title {
  line-height:20px;
  margin:0 0 5px;
  font-size:18px;
}

&__subtitle {
  line-height:20px;
  margin:0 0 5px;
  font-size:14px;
  color:#666;
  font-weight:300;
}

&__tags {
  line-height: 20px;
  margin:0;
  font-size: 14px;
  color: #666;
  font-weight: 300;
  list-style: none;
  padding:0;
  margin-bottom:10px;

  .sk-tag-filter {
    &:hover {
      color: $sk-action-text-color;
    }

    &:active {
      color: black;
    }
  }
}

&__text {
  line-height:22px;
  max-width:800px;
}

}

.sk-action-bar {

.sk-select, .sk-toggle {
  margin-left:15px;
}

}

.sk-layout__filters {

.sk-select select {
  width: 100%
}

}