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

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

@background: @white;
@borderWidth: 1px;
@border: none;

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

@margin: 1rem;
@borderRadius: @defaultBorderRadius;

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

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


/*******************************
            States
*******************************/

/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@loaderDimmerZIndex: 100;

/* Loading Spinner */
@loaderSize: 3em;
@loaderOffset: -(@loaderSize / 2);
@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
@loaderLineZIndex: 101;


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

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

/* Circular */
@circularPadding: 2em;

/* Stacked */
@stackedHeight: 6px;
@stackedPageBackground: @subtleTransparentBlack;
@stackedPadding: @verticalPadding + (0.4em);
@tallStackedPadding: @verticalPadding + (0.8em);

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

/* Attached */
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -1px;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none;
@attachedBorder: 1px solid @solidBorderColor;
@attachedBottomBoxShadow:
  @attachedBoxShadow,
  @subtleShadow
;

/* Colors */
@coloredBorderSize: 2px;
@coloredBorderRadius: @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;