@include export-module('co-catalog-external-sources-layout') {
  .co-catalog-external-sources {
    display: block;
    width: 100%;
    font-family: $co-catalog-external-sources-font-family;
    font-size: $co-catalog-external-sources-font-size;

    .pinned-label {
      font-size: $co-catalog-external-sources-font-size-big;
      font-weight: bold;
    }

    .pinned-divider-padding {
      padding-top: 30px;
      padding-bottom: 20px;
    }

    .pinned-divider {
      height: 1px;
      width: 100%;
      background-color: black;
    }

    .catalog-external-sources-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(10px, $co-catalog-external-sources-image-size));
      overflow: hidden;
      padding: $co-catalog-external-sources-padding;
      grid-gap: $co-catalog-external-sources-column-gap;
    }

    .external-source-item {
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      min-height: $co-catalog-external-sources-image-size;

      .co-image {
        height: 100%;
        width: 100%;
        border-style: $co-catalog-external-sources-item-border-style;
        border-width: $co-catalog-external-sources-item-border-width;
        border-radius: $co-catalog-external-sources-item-border-radius;

        img {
          height: 100%;
          width: 100%;
          filter: $co-catalog-external-sources-image-filter;
          border-radius: $co-catalog-external-sources-item-border-radius;
        }
      }

      .external-source-description {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: $co-catalog-external-sources-description-font-size;
        font-weight: $co-catalog-external-sources-description-font-weight;
        text-shadow: $co-catalog-external-sources-description-text-shadow;
        text-transform: $co-catalog-external-sources-description-text-transform;
        margin: $co-catalog-external-sources-description-margin;
      }

      &:hover {
        .co-image {
          img {
            filter: $co-catalog-external-sources-image-hover-filter;
          }
        }
      }
    }

    .catalog-external-sources-wrapper-unavailable {
      margin-top: $co-catalog-external-sources-column-gap;
      .external-source-item-unavailable {
        background-color: #eee !important;
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
        border-radius: 4px;
      }
    }
  }
}