/*******************************
            Segment
*******************************/

/*-------------------
       Element
--------------------*/

@borderWidth: 1px;
@border: none;

@borderShadow: 0px 0px 0px @borderWidth @borderColor;
@boxShadow:
  @borderShadow,
  @subtleShadow
;
@verticalPadding: 1em;
@horizontalPadding: 1em;

@margin: 1em;
@borderRadius: 0.25em;

/*-------------------
       Coupling
--------------------*/

/* Page Grid Segment */
@pageGridMargin: 2 * @verticalPadding;


/*******************************
            Variations
*******************************/

/* Piled */
@piledMargin: 2em;
@piledBoxShadow: 0px 0px 1px 1px @borderColor;
@piledDegrees: 1.2deg;

/* Circular */
@circularPadding: 2em;

/* Stacked */
@stackedPadding: @verticalPadding + (0.7em);
@stackedHeight: 5px;

/* Raised */
@raisedShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
@raisedBoxShadow:
  @borderShadow,
  @raisedShadow
;

/* Attached */
@attachedTopOffset: -1px;
@attachedBottomOffset: -1px;
@attachedBoxShadow: 0px 0px 0px 1px @solidBorderColor;
@attachedBottomBoxShadow:
  @attachedBoxShadow,
  @subtleShadow
;

/* Colors */
@coloredBorderSize: 0.2em;
@coloredBorderRadius: 0em 0em @borderRadius @borderRadius;

/* Ordinality */
@secondaryBackground: #FAF9FA;
@secondaryColor: @textColor;

@tertiaryBackground:  #EBEBEB;
@tertiaryColor: @lightTextColor;

@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
@secondaryInvertedColor: @offWhite;

@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
@tertiaryInvertedColor: @darkWhite;