/**
 * Copyright 2014 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.sessions .card__container {
  background: $color-accent;

  &:after, &:before {
    background: $color-accent;
  }
}

.sessions__session-detail > .card__container {
  background: darken($color-accent, 16%);

  &:after, &:before {
    background: darken($color-accent, 16%);
  }
}

.sessions__session-detail--panel > .card__container {
  background: darken($color-darkgray, 5%);

  &:after, &:before {
    background: darken($color-accent, 5%);
  }
}

.session__fab{
  cursor: pointer;
  @include shadow-z2();
  overflow: hidden;
  text-indent: -2000px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: none;
  background: $color-action;
  position: absolute;
  right: 24px;
  top: 244px - 24px;
  outline: none;

  -webkit-transition: -webkit-transform 0.3333s cubic-bezier(0,0,0.21,1);
  transition: transform 0.3333s cubic-bezier(0,0,0.21,1);

  &.hidden {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}

.session__fab-inner {
  width: 48px;
  height: 48px;
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  background: url(../images/icon-play.svg) center center no-repeat;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAChUlEQVRoBdWav84xQRSHj5FISBQSjWgV7kCtULsBhcoFqF2BmxEthQtwAwq1SiIhCM28++xr2G8/y/r32nMS2V125jy/md0zM2ekRMR6n5csm81Ko9GQer0u1WpVKpWKFAoFyefzfr2bzUZWq5XM53OZzWYymUxkPB7Lfr9/ya8rjICHPx6gbbfbdjAY2O12ax81ylCWOqjrGYZTmcfgc7mc7fV6dr1eP8oceT91USd1PyEknoB0Om07nY5dLBaRIK/+QN34wNcDQu4LKJfLdjqdvsoXuzy+8BlTxG0BtVrto60epYrewHcMEdECWq2W9SJFlI+Pf49vGO6IuC6AgkmxOyL+F0DXfbPlww0Hy43H6V8BvDyfjDRhuLjXMEW82BcBhK+/jDZx4d19sF0JsRcBxOCkG4yhl/pXAKNgEh+dcIPCGByxjafGt263K6VSyV0m9ggjrEHzJ1PvnNuEW+3d17C6CaDfA81m8zz1DSpL6jnTdJixs4CkwkZxOQEpbzFil8uleC9G1L2J/H6320mxWBTDSkobPC0KM+yGZaBWg92whtVqsBsW4FoNdkP2QKvBnjocDjaTyajUcDwef8cBlfQnaEPSSavBbsiYaTXYDek+rQa7IVep1WA3JFq1Guz6J3NeykJGo5G6ToAZdn89MBwO1QkIMutfUhJP+/2+ml6ANTh++XkWUhUa0yq0+jlRpDqxhRD1qUVEqE7uusdJdXrdiVC9wREU8c2NDnzf2Z0hAF2i0LVzHqdvhFd83tiVOUfOuwIQxYv9lxsfb91mdb1CiGWc+GRvUDc+ruzCBFs8fH77EXIC3JERW+VfDZwAdyQ/n4Q/e6ROQN7hefvm321+AJNtWIdxshmHAAAAAElFTkSuQmCC);

  border-radius: 24px;
}

.session__fab:focus {
  background: lighten($color-action, 3%);
}

.session__ask-a-question {
  @include typo-button();
  @include button();
  color: $color-accent;
  background: #FFF;
  margin: 16px 0 48px 0;
}

.session__ask-a-question .button__ripple {
  background: $color-darkgray;
}

.sessions > .card__container > .card__logo {
  width: 112px;
  height: 112px;
  left: calc(50% - 16px);
  top: calc(50% - 36px);
  background: url(../images/icon-sessions.svg) top left no-repeat;
  background-size: contain;
}

.sessions > .card__container > .card__content-wrapper {
  border-top: 136px solid $color-accent;
}

.sessions.card--expanded {

  & > .card__container {

    padding-bottom: 200px;

    & > .card__logo {
      width: 112px;
      height: 112px;
      left: calc(50% - 16px);
      top: 85px;
    }

    & > .card__content-wrapper {
      top: 60px;
    }

    & .sessions__day > .card {
      -webkit-backface-visibility: hidden;
    }
  }
}

.sessions__session-detail {

  min-height: 244px;
  margin-bottom: 4px;
  float: left;
  width: calc(50% - 2px);

  &:nth-of-type(2n) {
    margin-left: 4px;
  }

  & > .card__container {

    &:before {
      display: none;
    }

    & > .card__content-wrapper {
      border-top: none;
      min-height: 100vh;
      width: 100vw;
      top: 0;
      left: -50%;
      opacity: 0.4;
    }
  }

  &.sessions__session-detail--panel > .card__container > .card__content-wrapper {
    opacity: 0.2;
  }

  & .card__title {
    @include typo-base();
    font-size: 15px;
    letter-spacing: 0.01em;
    font-weight: 400;
    opacity: 0.87;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    display: table;
    vertical-align: bottom;
    height: auto;
    line-height: 1.45;
    max-width: 185px;

    & > .card__subtitle {
      display: block;
      font-size: 13px;
      font-weight: 700;
      margin-top: 0.5em;
      opacity: 0.56;
    }
  }

  &:hover .card__title {
    opacity: 1;
  }

  & .session__header-image {
    width: 100%;
    height: 100%;
    background: $color-accent top center no-repeat;
    background-size: cover;
    min-height: 244px;
    max-height: 396px;
    position: relative;
    overflow: hidden;
    left: 50%;
    display: table;
    line-height: 0;

    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);

    & .session__video-embed {
      min-height: 244px;
      max-height: 396px;
    }
  }
}

.sessions__session-detail.card--expanded {

  & .card__title {
    left: 0;
    bottom: 0;
    font-size: 15px;
    opacity: 0;
    height: auto;
    line-height: 1.45;
  }

  & .session__header-image {
    left: 0;

    -webkit-transform: none;
    transform: none;
  }

  & .session__header-image:after {
    opacity: 0;
  }

  & > .card__container {

    &.card__container--scrollable > .card__collapse-button {
      position: absolute;
    }

    & > .card__content-wrapper {
      left: 0;
      opacity: 1;
    }
  }

  &.card__no-fixed-header > .card__container {

    & > .card__title {
      display: none;
    }

    & > .card__content-wrapper {
      top: 0;
    }
  }
}

.sessions__day {

  position: relative;
  padding: 4px;
  padding-bottom: 40px;
  -webkit-backface-visibility: hidden;

  & > h1 {
    @include typo-base();
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: $color-accent;
    margin-bottom: 16px;
    padding-top: 20px;
    padding-left: 12px;
    -webkit-backface-visibility: hidden;
  }

  &:after {
    content: '';
    display: table;
    clear: both;
  }

  &:last-of-type {
    padding-bottom: 0;
  }
}

.session__header-headline {
  background: $color-accent;
  padding: 16px 72px 16px 16px;
}

.session__header-name {
  @include typo-headline();
  letter-spacing: 0.01em;
  font-size: 20px;
  color: #FFF;
  line-height: 1.3;
  margin-bottom: 8px;
}

.session__header-time-and-location {
  @include typo-subhead();
  font-size: 16px;
  opacity: 0.87;
  letter-spacing: 0.01em;
  color: #FFF;
}

.session__abstract {
  padding: 16px 16px 140px 16px;
  font-size: 13px;
}

.session__speaker {
  margin: 1em 0;
  font-size: 13px;
  font-weight: bold;
}

@media (min-width: 475px) {

  .sessions {
    height: 210px;
  }

  .sessions > .card__container > .card__logo {
    width: 142px;
    height: 142px;
    left: calc(50% - 20px);
    top: calc(50% - 46px);
  }
}

@media (min-width: 520px) {
  .sessions__session-detail {

    width: calc(33.3333% - 3px);
    min-height: 294px;

    &:nth-of-type(2n) {
      margin-left: 0;
    }

    &:nth-of-type(3n + 2),
    &:nth-of-type(3n + 3) {
      margin-left: 4px;
    }

    &:nth-of-type(3n + 3) {
      width: calc(33.3333% - 2px);
    }

    & .session__header-image {
      min-height: 294px;

      .session__video-embed {
        height: 294px;
      }
    }

    & .card__container > .card__content-wrapper {
      left: -100%;
    }
  }

  .session__fab {
    top: 294px - 24px;
  }
}

@media (min-width: 600px) {
  .sessions {
    height: 484px
  }

  .sessions > .card__container > .card__content-wrapper {
    top: 581px;
  }

  .sessions > .card__container > .card__logo {
    width: 224px;
    height: 224px;
    left: calc(50% - 35px);
    top: calc(50% - 76px);
  }

}

@media (min-width: 900px) {

  .sessions > .card__container > .card__content-wrapper {
    border-top: 136px solid darken($color-accent, 16%);
  }

}

@media (min-width: 960px) {
  .sessions.card--right-half {
    width: calc(50% - 4px);
    margin-right: 4px;
  }
}
