/*******************************
       Segment Overrides
*******************************/

/**
 * When an invisible element precedes a segment, make
 * the segment still behave as the first element.
 */
.invisible + .ui.segment,
.invisible + .ui.segments {
  margin-top: 0;
}

/**
 * Basic segments don't have background.
 * Do the same for inverted basic segment.
 */
.ui.basic.inverted.segment {
  background: none transparent;
}

/**
 * Transparent segment.
 */
.ui.transparent.segment {
  background-color: fade(@background, 85);

  &.inverted {
    background-color: fade(@invertedBackground, 50);
  }
}

/**
 * Primary color segment.
 */
.ui.primary.segment:not(.inverted) {
  border-top: @coloredBorderSize solid @primaryColor;
}
.ui.inverted.primary.segment {
  background-color: @primaryColor !important;
  color: @white !important;
}

/**
 * Testimonial segment.
 */
.ui.testimonial.segment {
  padding: @paddedSegmentPadding;
  p {
    padding-right: @veryPaddedSegmentPadding;
  }
  .ui.right.corner.label {
    top: 0;
    right: 0;
  }
}

/**
 * Plan segment.
 */
@media only screen and (min-width: @largestMobileScreen + 1) {
  .ui.plan.segments {
    margin-bottom: @featuredPlanSegmentOffset;
    &.featured {
      margin: -@featuredPlanSegmentOffset @featuredPlanSegmentOffsetHorizontal 0;
      z-index: @featuredPlanZIndex;
    }
  }
}


/* Allow to use stacked segment as grid, without getting the extra padding. */
.ui.stacked.segment.grid {
  padding-bottom: (@stackedHeight / 2);
  &.tall {
    padding-bottom: @stackedHeight;
  }
}

/**
 * WooCommerce
 */
.woocommerce {

  .ui.checkout.form,
  .ui.form#order_review,
  form#add_payment_method {

    /**
     * Override WC style of payment box.
     */
    .ui.segment#payment {
      border-radius: @borderRadius;
      background-color: @background;
    }

  }

}