@use '@vizality' as vz;

.vz-addons-list {
  $base: &;
  z-index: 1;
  &[vz-display='list'] {
    .vz-addon-card {
      flex: 1 100%;
    }
    &:not([vz-banners]) {
      .vz-addon-card {
        &-icon {
          @include vz.size(170px);
          margin: 10px 0 10px 10px;
        }
        &-header-wrapper {
          display: flex;
          flex-wrap: unset;
        }
      }
    }
    &[vz-banners] {
      .vz-addon-card {
        &-header-wrapper {
          display: flex;
          flex-flow: row;
        }
        &-banner-wrapper {
          width: 100%;
          max-width: 500px;
          flex: auto;
        }
        &-banner-inner {
          height: 100%;
          padding: 0;
          border: none;
          border-radius: 8px 0 0 8px;
        }
        &-content-wrapper {
          flex-direction: column;
        }
      }
    }
  }
}
