@duration: 0.8s;
@ease: cubic-bezier(.4,.0,.3,1);

@offset: 15%;
@offsetFull: unit(@offset, vw); 
/* 
If @offset is a percentage, we need to calculate using a vw unit, otherwise the % will not be accurate for the inner `.panel__content` container.
For a fixed width, non-percentage based container, use the same value for both.
*/

@textColor: #FFF;
@overlayColor: #000;
@highlightColor: #FFC12D;
@borderColor: @highlightColor;

/*////////////////////////////////////////*/
/* Layout */

.panels {
  width: 100%;
  
  // max-width: 400px;
  // margin: auto;
  
  height: 28%;
  min-height: 200px;
  overflow: hidden;
  background: @overlayColor;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.panel {
  display: inline-block;
  height: 100%;
  position: relative; 
  flex: 1;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform @duration @ease;
}

/*////////////////////////////////////////*/
/* Image/Text Container */

.panel__content {
  height: 100%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: @overlayColor center center no-repeat;
  background-size: cover;
  transition: transform @duration @ease;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 1;
    transition: opacity @duration @ease;
  }
  
  &:before {
    background: inherit;
    filter: grayscale(100%);
  }
  
  &:after {
    background: @overlayColor;
    opacity: 0.3;
  }
}

/*////////////////////////////////////////*/
/* Title */

.panel__title {
  color: @textColor;
  position: relative;
  z-index: 1;
  transition: color @duration @ease;
  width: 100%;
  text-align: center;
  padding: 1em;
}

/*////////////////////////////////////////*/
/* Alignment */

.panel {
  overflow: hidden;
  margin-right: -@offset;
}

.panel__content {
  margin-left: -@offsetFull;
  
}

// .panel__content {
//   margin-left: -@offset;
  
//   width: 100vw;
//   left: 50%;
//   transform: translateX(-52%);
//   //transform: translate3d( unit(-@offset/2,vw), 0, 0);
//   //transform: translate3d(-@offsetFull, 0, 0);
// }

// .panels {
//   position: relative;
  
//   &::before {
//     content: ' ';
//     border: solid 2px red;
//     display: inline-block;
//     flex: 1;
//     // position: absolute;
//     // right: 0;
//     // top: 0;
//     // width: 100%;
//     // height: 100%;
//     margin-right: -115%;
//     margin-left: 75%;
//     z-index: 10;
//     background: red;
//     opacity: 0.5;
//     pointer-events: auto;
//   }
// }

/*////////////////////////////////////////*/
/* Hover */

.panels {
  pointer-events: none;
}

.panel__title {
  pointer-events: auto;
}

/* Make the inactive panels darker */
.panels:hover .panel__content::after { opacity: 0.7; }

/* Panels before the active panel */
.panels:hover .panel { 
  transform: translate3d( -@offsetFull/ 2  , 0, 0);
}

/* Panels after the active panel */
.panel:hover ~ .panel { transform: translate3d( @offsetFull / 2, 0, 0); }

/* The active panel */
.panels .panel:hover {
  pointer-events: auto;
  .panel__content { transform: translate3d(@offsetFull / 2, 0, 0); }

  /* Hide the dark grayscale overlay, revealing the color photo */
  .panel__content::before,
  .panel__content::after { opacity: 0; }
}

.panels .panel:first-child:hover {  
  transform: translate3d( 0, 0, 0);
  ~ .panel { transform: translate3d( @offsetFull, 0, 0); }
  .panel__content { transform: translate3d( @offsetFull * 0.5, 0, 0); }
}

.panels .panel:last-child:hover {
   .panel__content { transform: translate3d( @offsetFull * 0.25, 0, 0); }
}



/*////////////////////////////////////////*/
/* Specific Design Setup */

@import 'https://fonts.googleapis.com/css?family=Oswald';

.panel__title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 2.5em;
  letter-spacing: 0.1em;

  @media (max-width: 800px) {
    font-size: 1.5em;
  }
  @media (max-width: 600px) {
    font-size: 1.25em;
  }
}

html, body { height: 100%; }

/* Nothing here! */