/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *     steps component file
 *  ----------- *** ------------
 *
 */

@import "cards_variables";

// Cards

.sn-card {
  position: relative;
  background: $default-card-background;
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: $default-border-radius;
  @include shadow-2dp();

  // Bordered
  &.sn-card--bordered {
    border: 1px solid $default-card-border-color;
  }

  // Without shadow
  &.sn-card--flat {
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  // Card Bleeds, Margins, Paddings and Gutters

  &.sn-card--bleed {
    margin: $default-card-bleed;
  }
  &.sn-card--padding {
    padding: $default-card-padding;
  }
}
// ./sn-cards

// Card List (ul)

.sn-card__list {
  margin: 0;
  padding: 0;

  li:first-child {
    .sn-card {
      border-top-left-radius: $default-border-radius;
      border-top-right-radius: $default-border-radius;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  li:last-child {
    .sn-card {
      border-bottom: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-bottom-left-radius: $default-border-radius;
      border-bottom-right-radius: $default-border-radius;
    }
  }

  .sn-card {
    border-radius: 0;
    border-bottom: $default-card-list-card-border solid $default-card-border-color;
  }

  li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    > a {
      flex: 1;
      width: 100%;
      height: 100%;
      color: inherit;
      background-color: yellow;
    }

    .sn-card--link {
      color: inherit;
    }
  }
  &.sn-card__list--strip {
    .sn-card:hover {
      background-color: $default-card-list-background-strip;
    }
  }
}
// ./card-list

// Align classes (for all)

.sn-card--center {
  @include flexbox();
  @include flex(1);
  -webkit-align-self: center;
  align-self: center;
}

// Card Icon Button

.sn-card__icon-button {
  position: relative;
  display: block;
  width: $default-card-icon-button-size;
  height: $default-card-icon-button-size;
  padding: $default-card-icon-button-padding;
  i {
    display: block;
    font-size: $default-icon-font-size !important;
    height: $default-card-icon-button-icon-size;
    width: $default-card-icon-button-icon-size;
    padding: $default-card-icon-button-icon-padding;
    text-align: center;
  }
  &:hover {
    i {
      color: $default-card-icon-button-hover;
    }
  }
}