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

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

@segmentBackground: @white;
@segmentBorderWidth: 1px;
@segmentBorder: @segmentBorderWidth solid @borderColor;

@segmentBoxShadow: @subtleShadow;
@segmentVerticalPadding: 1em;
@segmentHorizontalPadding: 1em;
@segmentPadding: @segmentVerticalPadding @segmentHorizontalPadding;

@segmentVerticalMargin: 1rem;
@segmentHorizontalMargin: 0em;
@segmentMargin: @segmentVerticalMargin @segmentHorizontalMargin;
@segmentBorderRadius: @defaultBorderRadius;

/*-------------------
       Group
--------------------*/

@segmentGroupedMargin: @segmentMargin;
@segmentGroupedBorder: @segmentBorder;
@segmentGroupedBoxShadow: @segmentBoxShadow;
@segmentGroupedBorderRadius: @segmentBorderRadius;

@segmentNestedGroupMargin: @segmentVerticalMargin @segmentVerticalMargin;

@segmentGroupedSegmentBorder: none;
@segmentGroupedSegmentDivider: @segmentBorder;
@segmentGroupedSegmentMargin: 0em;
@segmentGroupedSegmentWidth: auto;
@segmentGroupedSegmentBoxShadow: none;

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

/* Page Grid Segment */
@segmentPageGridMargin: (2 * @segmentVerticalPadding);

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

/* Loading Dimmer */
@segmentLoaderDimmerColor: rgba(255, 255, 255, 0.8);
@segmentLoaderDimmerZIndex: 100;

/* Loading Spinner */
@segmentLoaderSize: 3em;
@segmentLoaderLineZIndex: 101;


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

/* Piled */
@segmentPiledZIndex: auto;
@segmentPiledMargin: 3em;
@segmentPiledBoxShadow: '';
@segmentPiledDegrees: 1.2deg;
@segmentPiledBorder: @segmentBorder;

/* Circular */
@segmentCircularPadding: 2em;

/* Stacked */
@segmentStackedHeight: 6px;
@segmentStackedPageBackground: @subtleTransparentBlack;
@segmentStackedPadding: @segmentVerticalPadding + (0.4em);
@segmentTallStackedPadding: @segmentVerticalPadding + (0.8em);

/* Raised */
@segmentRaisedBoxShadow: @floatingShadow;

/* Padded */
@segmentPaddedSegmentPadding: 1.5em;
@segmentVeryPaddedSegmentPadding: 3em;

/* Attached */
@segmentAttachedTopOffset: 0px;
@segmentAttachedBottomOffset: 0px;
@segmentAttachedHorizontalOffset: -@segmentBorderWidth;
@segmentAttachedWidth: ~"calc(100% + "-@segmentAttachedHorizontalOffset * 2~")";
@segmentAttachedBoxShadow: none;
@segmentAttachedBorder: @segmentBorderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
  @segmentBoxShadow,
  @segmentAttachedBoxShadow
;

/* Inverted */
@segmentInvertedBackground: @black;

/* Floated */
@segmentFloatedDistance: 1em;

/* Basic */
@segmentBasicBackground: none transparent;
@segmentBasicBorder: none;
@segmentBasicBoxShadow: none;
@segmentBasicBorderRadius: 0px;

/* Colors */
@segmentColoredBorderSize: 2px;

/* Ordinality */
@segmentSecondaryBackground: @darkWhite;
@segmentSecondaryColor: @mutedTextColor;

@segmentTertiaryBackground:  @midWhite;
@segmentTertiaryColor: @mutedTextColor;

@segmentSecondaryInvertedLightness: 0.2;
@secondaryInvertedBackground:
  lighten(@black, (@segmentSecondaryInvertedLightness * 100))
  linear-gradient(
    rgba(255, 255, 255, @segmentSecondaryInvertedLightness) 0%,
    rgba(255, 255, 255, @segmentSecondaryInvertedLightness) 100%
  )
;
@segmentSecondaryInvertedColor: @invertedMutedTextColor;

@segmentTertiaryInvertedLightness: 0.35;
@tertiaryInvertedBackground:
  lighten(@black, (@segmentTertiaryInvertedLightness * 100))
  linear-gradient(
    rgba(255, 255, 255, @segmentTertiaryInvertedLightness) 0%,
    rgba(255, 255, 255, @segmentTertiaryInvertedLightness) 100%
  )
;
@segmentTertiaryInvertedColor: @invertedMutedTextColor;