$media-excludes: ':not(.c-media-list-header):not(.c-media-list-footer)';

// Base Media Object
.c-media {
  display: flex;
  line-height: 1;
  color: $media-color;
  padding: $media-padding;
  align-items: flex-start;
  background-color: $media-bg;
  min-height: $media-min-height;
  font-size: $media-action-font-size;
  border-radius: $media-border-radius;

  > * {
    margin: $media-margin;

    &:first-child {
      margin-left: $media-body-padding;
    }

    &:last-child {
      margin-right: $media-body-padding;
    }
  }

  &-body {
    flex: 1;
    min-width: 1px;

    > * {
      margin-bottom: $space-0;
    }

    .c-media > {
      *:first-child {
        margin-left: $space-0;
      }

      *:last-child {
        margin-right: $space-0;
      }
    }

    & .c-media {
      margin-left: $media-body-padding;
    }
  }

  // Center align vertically
  &-middle {
    align-items: center;
  }

  // Align to bottom
  &-bottom {
    align-items: flex-end;
  }

  // Make a vertical style
  &-vertical {
    &.c-media > * {
      margin: $space-0;
    }

    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    border: $media-border;
  }

  // Titles
  &-title {
    flex: 1 1 0%;
  }

  // Heading
  &-heading {
    margin-top: $space-0;
    margin-bottom: $space-0;
  }

  // Actions
  &-action {
    opacity: 0;
    transition: .5s;
    text-align: center;
    color: $media-action-color;
    font-size: $media-action-font-size;
    line-height: $media-action-line-height;

    .c-media:hover & {
      opacity: 1;
    }

    &-visible,
    &-visible & {
      opacity: 1;
    }
  }

  // Block Actions
  &-block-actions {
    display: flex;
    align-items: center;
    margin-top: $space-xs;
    justify-content: flex-start;
  }
}

// List Media Object
.c-media-list {
  list-style: none;
  padding-left: $space-0;
  border-radius: $global-radius;

  // Expanded second level style
  > .c-media-body {
    background-color: $media-bg;
    padding: $media-body-padding;
    border-bottom: $media-border;
  }

  > .c-media#{$media-excludes},
  .c-media-list-body > .c-media {
    margin-bottom: $space-0;
  }

  & ul {
    padding-left: $space-0;
  }

  // Make items hoverable
  &-hover {
    > .c-media#{$media-excludes}:hover,
    .c-media-list-body > .c-media:hover {
      background-color: $media-hover-bg;
      cursor: pointer;
    }
  }

  // Add dividing lines
  &-divided {
    > .c-media#{$media-excludes},
    .c-media-list-body > .c-media {
      border-bottom: $media-border;

      &:last-child {
        border-bottom: 0;
      }
    }
  }

  // Add surrounding border
  &-bordered {
    border: $media-border;
  }

  // Striped backgrounds
  &-striped {
    .c-media#{$media-excludes}:nth-child(even) {
      background-color: $media-stripe-bg;
    }
  }

  // List headers
  &-header {
    background-color: $media-header-bg;
    border-bottom: $media-border;

    .c-media {
      min-height: 0;
    }
  }

  // List Footer
  &-footer {
    background-color: $media-header-bg;

    .c-media {
      min-height: 0;
    }
  }
}