:root {
  // the gap between list items
  --miso-affiliation-item-gap: 1rem;
  // the spacing among list item content
  --miso-affiliation-item-content-spacing: 1rem;

  // how many lines to show for title text
  --miso-affiliation-title-lines: 3;
  // how many lines to show for description text
  --miso-affiliation-description-lines: 4;

  --miso-affiliation-control-button-effective-width: 3.5rem;
  --miso-affiliation-control-button-width: 2.5rem;
  --miso-affiliation-control-button-color: #fff;
  --miso-affiliation-control-button-color-hover: #f0f0f0;

  //--miso-affiliation-item-max-width: 48rem;
  --miso-affiliation-item-body-height: 20rem;
  --miso-affiliation-item-border-radius: 1rem;
  --miso-affiliation-item-image-border-radius: 0.75rem;
  --miso-affiliation-item-image-max-width: 50%;
  --miso-affiliation-item-image-max-height: 100%;

  //--miso-affiliation-item-box-shadow: 0 0 8px rgba(0, 0, 128, 0.4);
  //--miso-affiliation-item-box-shadow-hover: 0 0 12px rgba(0, 0, 128, 0.4);

  --miso-affiliation-item-header-bg-color: #e0e0e0;
  --miso-affiliation-item-header-text-color: var(--miso-text-color);
  --miso-affiliation-item-cta-bg-color: #408048;
  --miso-affiliation-item-cta-text-color: #fff;
}

.miso-affiliation {
  position: relative;
  padding: 0 calc(var(--miso-affiliation-control-button-effective-width) + 0.5rem);

  .miso-affiliation__control-previous-container,
  .miso-affiliation__control-next-container {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .miso-affiliation__control-previous-container {
    left: 0;
  }
  .miso-affiliation__control-next-container {
    right: 0;
  }
  .miso-affiliation__control-previous,
  .miso-affiliation__control-next {
    width: var(--miso-affiliation-control-button-effective-width);
    height: calc(var(--miso-affiliation-control-button-effective-width) * 1.414);
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .miso-ui-icon-triangle {
      width: calc(var(--miso-affiliation-control-button-width) * 1.414);
      aspect-ratio: 1;
      stroke-width: 2;
      stroke: var(--miso-border-color-light);
      fill: var(--miso-affiliation-control-button-color);
    }

    &:hover {
      .miso-ui-icon-triangle {
        stroke: var(--miso-border-color-medium);
        fill: var(--miso-affiliation-control-button-color-hover);
      }
    }
  }
  .miso-affiliation__control-previous {
    .miso-ui-icon-triangle {
      transform: translateX(30%) rotate(-45deg);
    }
  }
  .miso-affiliation__control-next {
    .miso-ui-icon-triangle {
      transform: translateX(-30%) rotate(135deg);
    }
  }
  &[data-item-count="0"],
  &[data-item-count="1"] {
    .miso-affiliation__control-previous,
    .miso-affiliation__control-next {
      display: none;
    }
  }

  .miso-affiliation__body {
    overflow: hidden;
    padding: 0.5rem 0;
  }
  &[data-item-type="affiliation"] {
    .miso-affiliation__list {
      list-style: none !important;
      padding: 0;
      margin: 0;
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      left: 0;
      transition: left 0.2s;
    }
    .miso-affiliation__item {
      width: 100%;
      flex-shrink: 0;
      flex-grow: 0;
      margin: 0;
      padding: 0 var(--miso-affiliation-item-gap);
    }
  }
  .miso-affiliation__item-inner {
    border: 1px solid var(--miso-border-color-light);
    border-radius: var(--miso-affiliation-item-border-radius);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    overflow: hidden;
    //box-shadow: var(--miso-affiliation-item-box-shadow);

    /*
    &:hover {
      border-color: var(--miso-border-color-medium);
      box-shadow: var(--miso-affiliation-item-box-shadow-hover);
    }
    */
  }
  .miso-affiliation__item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--miso-affiliation-item-content-spacing) * 0.75) var(--miso-affiliation-item-content-spacing);
    background-color: var(--miso-affiliation-item-header-bg-color);
    color: var(--miso-affiliation-item-header-text-color);
    font-size: 0.9rem;
  }
  .miso-affiliation__item-header-left {
    font-weight: 600;
    text-transform: capitalize;
  }
  .miso-affiliation__item-header-right {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }
  .miso-affiliation__item-header-logo {
    height: 1.5rem;
  }
  .miso-affiliation__item-body {
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    gap: var(--miso-affiliation-item-content-spacing);
    position: relative;
    height: var(--miso-affiliation-item-body-height);
    padding: var(--miso-affiliation-item-content-spacing);
    background-color: #fff;
  }
  a.miso-affiliation__item-body {
    cursor: pointer;
    text-decoration: none;
  }

  .miso-affiliation__item-cover-image-container {
    position: relative;
    max-width: var(--miso-affiliation-item-image-max-width);
    max-height: var(--miso-affiliation-item-image-max-height);
    flex-shrink: 0;
    border: 1px solid var(--miso-border-color-light);
    border-radius: var(--miso-affiliation-item-image-border-radius);
    overflow: hidden;

    &::before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: radial-gradient(50% 50% at 50% 50%, transparent 0, rgba(0, 0, 0, .004) 82.81%, rgba(0, 0, 0, .016) 100%);
      background-blend-mode: normal, luminosity;
    }
  }
  img.miso-affiliation__item-cover-image {
    object-fit: contain;
    height: 100%;
    width: 100%;
    max-width: 100%;
    border-style: none;
  }

  .miso-affiliation__item-brand-container {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    pointer-events: none;
  }
  .miso-affiliation__item-brand {
    display: inline-block;
    padding: 0.2em 0.4em;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--miso-text-color);
    color: #fff;
  }
  img.miso-affiliation__item-brand-logo {
    display: block;
    max-height: 2rem;
  }

  .miso-affiliation__item-info-container {
    display: flex;
    flex-direction: column;
    color: var(--miso-text-color);
    margin-top: -0.3rem; // to align text and image

    > hr {
      display: none;
    }
  }

  .miso-affiliation__item-title,
  .miso-affiliation__item-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .miso-affiliation__item-title {
    margin-bottom: .25rem;
    -webkit-line-clamp: var(--miso-affiliation-title-lines);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--miso-text-color);
  }
  .miso-affiliation__item-desc {
    -webkit-line-clamp: var(--miso-affiliation-description-lines);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.35;
    margin-bottom: .5rem;
  }

  .miso-affiliation__item-price-container {
    margin-bottom: 0.5rem;
  }
  .miso-affiliation__item-original-price {
    font-size: 0.9rem;
    color: var(--miso-text-color-gray);
    text-decoration: line-through;
  }
  .miso-affiliation__item-discount-rate,
  .miso-affiliation__item-price {
    font-weight: 600;
    font-size: 1.25rem;
  }
  .miso-affiliation__item-price {
    color: #aa222e;
  }

  .miso-affiliation__item-cta-container {
    position: relative;
    margin-top: auto;
  }
  .miso-affiliation__item-cta {
    display: block;
    padding: 0.5rem 1rem;
    max-width: 20rem;
    text-align: center;
    background-color: var(--miso-affiliation-item-cta-bg-color);
    color: var(--miso-affiliation-item-cta-text-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 0.25rem;
  }
}