/// Defatul bottom margin of the panel
/// @type List
$panel-margin: rem-calc(20 10);
/// Default background color of the panel
/// @type Color
$panel-container-background-color: $white !default;

/// Default radius of the panel
/// @type List
$panel-container-radius: $global-radius !default;

/// Default bottom border width of the panel's header
/// @type Number
$panel-header-border-bottom-width: rem-calc(4) !default;

/// Default bottom border color of the panel's header
/// @type Color
$panel-header-border-bottom-color: $light-gray !default;

/// Default font color of the panel's title
/// @type Color
$panel-header-color: $dark-gray;

/// Default font size of the panel's title
/// @type Number
$panel-header-font-size: rem-calc(26) !default;

/// Default bottom border color of the post
/// @type Color
$post-item-border-bottom-color: $light-gray !default;

/// Default bottom border width of the post
/// @type Number
$post-item-border-bottom-width: rem-calc(1) !default;

/// Adds styles for post-list's elements in small screen and it also could be used for bigger screen in small areas
@mixin small-posts-list {
  .posts-list{
    .post-title{
      font-size: rem-calc(18);
    }

    .post-meta{
      font-size: rem-calc(12);
    }

    .post-summary{
      font-size: rem-calc(12);
    }
    .post-read-more{
      display: none;
    }
  }
}


.posts-panel{
  @include grid-col-row();
  float: none !important;
  margin: $panel-margin;
  background-color: $panel-container-background-color;
  border-radius: $panel-container-radius;
  box-shadow: rem-calc(0 0 4 0) rgba(0,0,0,.2);

  .panel-header{
    @include grid-col-row();
    border-bottom: $panel-header-border-bottom-width solid $panel-header-border-bottom-color;

    .panel-title{
      margin: 0;
      padding: rem-calc(15 0);
      color: $panel-header-color;
      font-size: $panel-header-font-size;
    }
  }

  .panel-content{
    padding: rem-calc(15 0);
  }

  .pinned-post, .posts-list{
    @include grid-col-row($gutters: 0);
  }

  .posts-list{
    .post-item:not(:last-child){
      border-bottom: $post-item-border-bottom-width solid $post-item-border-bottom-color;
    }
  }

  .post-item{
    @include grid-row();
    padding: rem-calc(15 0);

    .post-thumbnail{
      display: block;
      @include grid-column($columns: 4);

      img{
        width: 100%;
        height: auto;
      }
    }

    .post-text{
      @include grid-column($columns: 8);

      p{
        margin: 0;
      }
    }
    .post-title{
      font-size: rem-calc(26);
    }
    .post-meta{
      color: $dark-gray;
      font-size: rem-calc(14);
    }
    .meta{
      display: inline-block;
      margin-#{$global-right}: rem-calc(15);
    }
    .meta-icon, .meta-text{
      display: inline-block;
      padding-#{$global-right}: rem-calc(5);
    }

    .post-summary{

    }

    .post-read-more{
      display: block;
      font-size: rem-calc(14);

      .fa{
        padding: rem-calc(0 5)
      }
    }
  }

  .pinned-post{
    .post-item{
      border-bottom: $post-item-border-bottom-width solid $post-item-border-bottom-color;
    }
    .post-thumbnail{
      display: block;
      @include grid-col-row();
      img{
        width: 100%;
        height: auto;
      }
    }

    .post-text{
      @include grid-col-row();
      margin-top: rem-calc(15);
    }
  }

  @include breakpoint(small only){
    @include small-posts-list;
  }

  @include breakpoint(medium only){
    .posts-list{
      .post-title{
        font-size: rem-calc(20);
      }

      .post-meta{
        font-size: rem-calc(14);
      }

      .post-summary{
        font-size: rem-calc(14);
      }
    }
  }

  // Grid styles
  &.grid{
    .pinned-post, .posts-list{
      @include grid-column($columns: 6, $gutters: 0);

      @include breakpoint(small only){
        @include grid-col-row($gutters: 0);
      }
    }

    .pinned-post{
      .post-item{
        border: 0;
      }
    }

    @include small-posts-list;
  }
}
