.widget
  .slideshow-nav
    %div
      %span#prev.fa.fa-chevron-up
    %div
      %span#next.fa.fa-chevron-down

  .cycle-slideshow{'data-cycle-fx': 'scrollVert', 'data-cycle-slides': 'figure', 'data-cycle-timeout': '0', 'data-cycle-prev': '#prev', 'data-cycle-next': '#next'}

    %figure
      %figcaption
        %h3 Gemstone
        %span.break
        %h4 Bracelet
        %span.price $600
      %div
        <!-- Image by Aleksey Gnilenkov from Russia [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/gnilenkov/7906670774 -->
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/bracelet.jpg', alt: 'Gemstone Bracelet'}

    %figure
      %figcaption
        %h3 Gold
        %span.break
        %h4 Ring
        %span.price $1200
      %div
        <!-- Image by Aleksey Gnilenkov from Russia [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/gnilenkov/8132090918 -->
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/ring.jpg', alt: 'Gold Ring'}

    %figure
      %figcaption
        %h3 Silver
        %span.break
        %h4 Brooch
        %span.price $799
      %div
        <!-- Image by Aleksey Gnilenkov from Russia [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/gnilenkov/5787299051 -->
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/brooch.jpg', alt: 'Silver Brooch'}

    %figure
      %figcaption
        %h3 Diamond
        %span.break
        %h4 Earrings
        %span.price $399
      %div
        <!-- Image by Aleksey Gnilenkov from Russia [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/gnilenkov/8434791931 -->
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/earrings.jpg', alt: 'Diamond Earrings'}

@import "bourbon";

$offGray: #ebeff0;

@mixin MQ {
  @media only screen and (min-width: 620px) { @content; }
}

html {
  min-height: 100%;
}

body {
  background: #f8fafc;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.widget {
  margin: 4em auto 0;
  width: 240px;
  height: 100%;
  background: #fff;
  border: 2px solid $offGray;
  -webkit-box-shadow: 7px 7px 1px -2px rgba(241,244,249,1);
  -moz-box-shadow: 7px 7px 1px -2px rgba(241,244,249,1);
  box-shadow: 7px 7px 1px -2px rgba(241,244,249,1);
  @include clearfix;
  
  @include MQ {
    height: 240px;
    width: 600px;
  }
  
  .slideshow-nav {
    width: 100%;
    height: 100%;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/widget_nav_bg.jpg) repeat;
    @include clearfix;
    
    @include MQ {
      width: 20%;
      float: left;
    }
    
    div {
      display: table;
      width: 50%;
      height: 100px;
      float: left;
      vertical-align: middle;
      border-bottom: 2px solid $offGray;
      cursor: pointer;
      
      @include MQ {
        width: 100%;
        height: 50%;
        border-right: 2px solid $offGray;
        border-bottom: none;
      }
      
      #prev, #next {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 2em;
        color: #d0b269;
        -moz-user-select: none;
        -webkit-user-select: none;
        &:hover {
          color: lighten(#d0b269, 10%);
        }
        &:active {
          color: darken(#d0b269, 2%);
        }
      }
      
      #prev {
        border-right: 1px solid $offGray;
        
        @include MQ {
          border-right: none;
          border-bottom: 1px solid $offGray;
        }
      
      }
      
      #next {
        border-left: 1px solid $offGray;
        
        @include MQ {
          border-left: none;
          border-top: 1px solid $offGray;
        }
      
      }
    
    }
  
  }
  
  .cycle-slideshow {
    width: 100%;
    
    @include MQ {
      width: 80%;
      float: left;
    }
    
    figure {
      margin: 0;
      width: 100%;
      @include clearfix;
      
      figcaption {
        width: 100%;
        padding: 2em;
        
        @include MQ {
          width: 50%;
          float: left;
        }
        
        h3, h4 {
          color: #111868;
          text-transform: uppercase;
        }
        
        h3 {
          margin: 0;
          font-family: 'Oranienbaum', serif;
          font-size: 2em;
        }
        
        h4 {
          margin: 0;
          font-family: 'Gentium Basic', serif;
        }
        
        .break {
          display: block;
          position: relative;
          margin: 1.5em 0;
          width: 100px;
          height: 2px;
          background: $offGray;
          &:before, &:after {
            display: block;
            position: absolute;
            content: "";
            top: -1px;
            width: 4px;
            height: 4px;
            background: $offGray;
            border-radius: 50%;
          }
          &:before {
            left: 0;
          }
          &:after {
            right: 0;
          }
        
        }
        
        .price {
          display: block;
          font-family: 'Gentium Basic', serif;
          font-size: 3em;
          color: #cb103f;
        }
      
      }
      
      div {
        width: 100%;
        overflow: hidden;
        
        @include MQ {
          width: 50%;
          float: left;
        }
      
      }
    
    }
  
  }

}