
.add-on-card-list {
    // display: grid;
    // grid-gap: 30px 20px;
  // gap: 30px 20px;
  // grid-template-columns: repeat(3, 1fr);

  $add-on-card-size: 180px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax($add-on-card-size * 2, 1fr));
	grid-gap: $s-m;

	@include m-mobile-down {
		display: block;
	}
}


.add-on-card {
  transition: all 100ms ease;
    border-radius: 5px;
    border: 1px solid color(add-on-card-border);
  position: relative;
  background: color(bg-0);

  display: flex;
  align-items: center;
    width: 100%;
	padding: $s-m $s-m ($s-m - 2px) $s-m;
  @include shadow-input;

	@include m-mobile-down {
		margin-bottom: 20px;
		flex-wrap: wrap;
	}
}

.add-on-card--clickable {
  cursor: pointer;

  &:hover {
    // box-shadow: 0 0 0 1px color(border-dark);
    // box-shadow: 0 0 0 1px color(accent);
    // border-color: color(border-dark);
    background-color: color(bg-5);
    border-color: color(border-dark);
  }
}

.add-on-card--uninstalled {
  .add-on-card__icon, .add-on-card__title, .add-on-card__desc {
    opacity: 0.8;
  }
}

.add-on-card--selected {
  box-shadow: 0 0 0 1px color(accent);
  border-color: color(accent);
  background: color(accent-light)
}

.add-on-card__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 50px;
    margin-right: 20px;

    .price {
    margin-top: 5px;
    }
}

.add-on-card__text {
  flex: 1 0 auto;
  width: 50%;
  position: relative;
  top: -4px;
}

.add-on-card__title {
  font-size: 1em;
  // font-weight: 600;
  padding-right: 16px;

  a {
    color: color(text-normal);
    display: block;

    &:hover {
      color: color(link-hover);
    }
  }
}

.add-on-card__title-version {
  font-size: 0.9rem;
  color: color(text-secondary);
  font-weight: 400;;
}

.add-on-card__cog {
  position: absolute;
  top: $s-m - $s-s;
  right: $s-m - $s-s;
  font-size: 1rem;
  padding: $s-s;
  line-height: 1;
  color: color(text-secondary);
  cursor: pointer;

  &:hover {
    color: color(text-tertiary);
  }
}

.add-on-card__desc {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  // font-size: 0.9em;
  // margin-bottom: $s-s;
  color: color(text-secondary);
}

.add-on-card__button {
	margin-left: $s-s;
	white-space: nowrap;

	@include m-mobile-down {
		width: 100%;
		margin-left: 0;
		margin-top: 10px;
		display: block;
	}
}

.add-on-card__table {
  white-space: nowrap;

  table {
    margin: 6px 0 -6px 0;
    border: none;
    background: none;

    td {
      color: var(--ee-button-secondary-color);
      padding: 0;

      .toolbar-wrap {
        .toolbar {
          display: flex;
          flex-wrap: wrap;

          a {
            text-transform: capitalize !important;
            color: var(--ee-button-secondary-color) !important;
            background: none !important;
            font-weight: 700;

            &:before { display: none;}

            &.no {
              color: var(--ee-error) !important;
              padding-left: 20px;
              position: relative;
              margin-right: 20px;
              font-weight: 400;

              &:before {
                position: absolute;
                top: 2px;
                left: 0;
                width: 20px;
                height: 20px;
                display: inline-block;
                flex-shrink: 0;
                content: "\f06a";
                font-weight: 400;;
                font-family: 'Font Awesome 6 Pro';
              }
            }
          }
        }
      }
    }
  }
}

.add-on-card.first-party .first-party-svg {
  color: color(brand-primary);
  max-width: 50px;
  max-height: 50px;
}

.corner-ribbon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100px;
  background: transparent;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

.corner-ribbon {
  width: 200px;
  background: #e43;
  position: absolute;
  top: 15px;
  left: -25px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f0f0f0;
  font-weight: bold;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

  &.sticky{
    position: fixed;
  }

  &.shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
  }

  &.top-left{
    top: 20px;
    left: -65px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  &.top-left.trial{
    top: 12px;
    left: -74px;
  }

  &.top-right{
    top: 25px;
    right: -50px;
    left: auto;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  &.bottom-left{
    top: auto;
    bottom: 25px;
    left: -50px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  &.bottom-right{
    top: auto;
    right: -50px;
    bottom: 25px;
    left: auto;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }

  &.trial {
    background: color(accent);
  }
  &.update_available {
    background: color(ee-update);
  }
  &.invalid {
    background: color(danger);
  }
  &.expired {
    background: color(warning);
  }
}


.license-status-badge {
  @extend .button;
  @extend .button--secondary;
  @extend .button--xsmall;
  border-radius: $border-radius-full;

  &.license-status-expired {
    @extend .button--warning;
  }

  &.license-status-invalid {
    @extend .button--danger;
  }
}
// Special styling for Pro add-on card
[data-addon="pro"],
[data-addon="pro"]:hover {
    background-color: color(accent-light);
    border-color: color(accent);
}
