/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-card-header() {
  padding: el-theme(card-padding);
  border-bottom: el-theme(card-divider-width) el-theme(card-divider-style) el-theme(card-divider-color);
  border-top-left-radius: el-theme(card-border-radius);
  border-top-right-radius: el-theme(card-border-radius);

  color: el-theme(card-header-text-color);
  font-family: el-theme(card-header-text-font-family);
  font-size: el-theme(card-header-text-font-size);
  font-weight: el-theme(card-header-text-font-weight);
  line-height: el-theme(card-header-text-line-height);

  @include el-headings();
}

@mixin el-card-theme() {
  el-card {
    background-color: el-theme(card-background-color);
    border: el-theme(card-border-width) el-theme(card-border-style) el-theme(card-border-color);
    border-radius: el-theme(card-border-radius);
    box-shadow: el-theme(card-shadow);

    color: el-theme(card-text-color);
    font-family: el-theme(card-text-font-family);
    font-size: el-theme(card-text-font-size);
    font-weight: el-theme(card-text-font-weight);
    line-height: el-theme(card-text-line-height);

    // TODO: move card margin style to layout
    margin-bottom: el-theme(card-margin-bottom);

    @include el-scrollbars(
        el-theme(card-scrollbar-color),
        el-theme(card-scrollbar-background-color),
        el-theme(card-scrollbar-width));

    @each $size in el-get-sizes() {
      &.size-#{$size} {
        height: el-theme(card-height-#{$size});
      }
    }

    @each $status in el-get-statuses() {
      &.status-#{$status} {
        el-card-header {
          background-color: el-theme(card-header-#{$status}-background-color);
          border-bottom-width: 0;
          border-bottom-color: el-theme(card-header-#{$status}-background-color);
          color: el-theme(card-header-#{$status}-text-color);

          a,
          a:hover {
            color: el-theme(card-header-#{$status}-text-color);
          }
        }
      }

      &.accent-#{$status} {
        border-top-color: el-theme(card-header-#{$status}-background-color);
      }
    }

    &.accent {
      border-top-style: el-theme(card-border-style);
      border-top-width: el-theme(card-border-radius);

      & el-card-header {
        border-radius: 0;
      }
    }
  }

  el-card-body {
    flex: 1;
    -ms-flex: 1 1 auto;
    overflow: auto;
    padding: el-theme(card-padding);
    position: relative;
    @include el-scrollbars(
        el-theme(card-scrollbar-color),
        el-theme(card-scrollbar-background-color),
        el-theme(card-scrollbar-width));
  }

  el-card-footer {
    padding: el-theme(card-padding);
    border-top: el-theme(card-divider-width) el-theme(card-divider-style) el-theme(card-divider-color);
    border-bottom-left-radius: el-theme(card-border-radius);
    border-bottom-right-radius: el-theme(card-border-radius);
  }

  el-card-header {
    @include el-card-header();
  }
}