@import '../1-Helpers/mixins';

$card-padding: 18px !default;
$card-padding-large: 24px !default;
$card-bg-color: #fff !default;
$card-link-color: $orange !default;
$card-link-color-light: $orange !default;

.card {
    position: relative;
    border-radius: 5px;
    transition: box-shadow .25s;
    
    @include themify {
      background: themed('cardBackground');
      box-shadow: 0 3px 6px themed('cardShadow');
    }

    header {
      padding: 5px 10px;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      display: flex;
      align-items: center;

      i.material-icons, .card-title {
        font-size: 24px;
        font-weight: 300;
      }

      i.material-icons {
        margin-right: 10px;
      }

      .card-title {
        flex: 1
      }
    }

    // card flavours
    &.dense {
        padding: 25px;
    }
    
    &.flat {
        box-shadow: none;
        border: 2px solid;

        @include themify {
          border-color: themed('cardBorder')
        }

        &.hoverable:hover {
          cursor: pointer;

          @include themify {
            box-shadow: 0 3px 6px themed('cardShadow');
          }
        }

        // flavours
        &.flat {
          &-primary {
            border-color: $primary-shadow-color;
          }
          &-secondary {
            border-color: $secondary-shadow-color;
          }
          &-green {
            border-color: $green;
          }
          &-red {
            border-color: $red;
          }
        }
    }

    &.outline {
      &-primary {
        border: 2px solid $primary-shadow-color;
      }
      &-secondary {
        border: 2px solid $secondary-shadow-color;
      }
      &-blue {
        border: 2px solid $blue-shadow;
      }
    }
  
    // Card Sizes
    &.small, &.medium, &.large {
      position: relative;
  
      .card-image {
        max-height: 60%;
        overflow: hidden;
      }
      .card-image + .card-content {
        max-height: 40%;
      }
      .card-content {
        max-height: 100%;
        overflow: hidden;
      }
      .card-action {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  
    &.small {
      height: 300px;
    }
  
    &.medium {
      height: 400px;
    }
  
    &.large {
      height: 500px;
    }

    .card-image {
        position: relative;
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
  
      // Image background for content
      img {
        display: block;
        border-radius: 2px 2px 0 0;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        border-radius: inherit;
      }
  
      .card-title {
        color: $card-bg-color;
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: 100%;
        padding: $card-padding;

        @include tablet-and-up {
          padding: $card-padding-large
        }
      }
    }
  
    .card-content {
      padding: $card-padding;
      border-radius: 0 0 2px 2px;

      @include tablet-and-up {
        padding: $card-padding-large;
      }
  
      p {
        margin: 0;
      }
      .card-title {
        display: block;
        line-height: 32px;
        margin-bottom: 8px;
  
        i {
          line-height: 32px;
        }
      }
    }
  
    .card-action {
      &:last-child {
        border-radius: 0 0 2px 2px;
      }
      background-color: inherit; // Use inherit to inherit color classes
      border-top: 1px solid rgba(160,160,160,.2);
      position: relative;
      padding: 10px $card-padding;
      text-align: center;

      @include tablet-and-up {
        text-align: right;
        padding: 12px $card-padding-large;
      }
  
      a:not(.btn):not(.btn-large):not(.btn-floating) {
        color: $card-link-color;
        margin-right: $card-padding;
        transition: color .3s ease;
        text-transform: uppercase;
  
        @include tablet-and-up {
          margin-right: $card-padding-large;
        }

        &:hover { color: $card-link-color-light; }
      }

      button {
        margin-right: 5px;

        @include tablet-and-up {
          margin-right: 10px;
        }
      }
    }
  
    .card-reveal {
      padding: $card-padding;
      position: absolute;
      background-color: $card-bg-color;
      width: 100%;
      overflow-y: auto;
      left: 0;
      top: 100%;
      height: 100%;
      z-index: 3;
      display: none;

      @include tablet-and-up {
        padding: $card-padding-large
      }
  
      .card-title {
        cursor: pointer;
        display: block;
      }
    }

    // card widgets
    // card loading
    &.loading {
      position: relative;

      &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        border-radius: inherit;
        
        @include themify {
          background-color: themed('cardLoadingBackground');
        }
      }
    }
    .loader:not(.no-card) {
      position: absolute;
      height: max-content;
      display: block;
      z-index: 1;
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;

      .el {
        margin-bottom: 0;
        width: 100%;
      }
    }
  }