/*
  augmented-ui
  BSD 2-Clause License
  Copyright (c) James0x57, PropJockey, 2019
*/



[augmented-ui~="tl-clip"],
[augmented-ui~="tl-clip"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px; /* clip size */
  --aug-_TlWidth: var(--aug-tl-width, var(--aug-tl));
  --aug-_TlHeight: var(--aug-tl-height, var(--aug-tl));
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-_TlHeight);
  --aug-_TlJoinRX: var(--aug-_TlWidth);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY), var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY), var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY), var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}

[augmented-ui~="br-clip"],
[augmented-ui~="br-clip"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* clip size */
  --aug-_BrWidth: var(--aug-br-width, var(--aug-br));
  --aug-_BrHeight: var(--aug-br-height, var(--aug-br));
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-_BrHeight));
  --aug-_BrJoinLX: calc(100% - var(--aug-_BrWidth));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY), var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY), var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY), var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}

[augmented-ui~="exe"]::after {
  content: "";
  display: var(--aug-border-bg, none);
}
[augmented-ui~="border-el"],
[augmented-ui~="exe"]::after {
  opacity: var(--aug-border-opacity, 1);
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
  clip-path: polygon(
    var(--aug-_TlPathInset1, var(--aug-_W) var(--aug-_W))
    var(--aug-_TPathInset1, ),
    var(--aug-_TrPathInset1, var(--aug-_100W) var(--aug-_W))
    var(--aug-_RPathInset1, ),
    var(--aug-_BrPathInset1, var(--aug-_100W) var(--aug-_100W))
    var(--aug-_BPathInset1, ),
    var(--aug-_BlPathInset1, var(--aug-_W) var(--aug-_100W))
    var(--aug-_LPathInset1, ),
    var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    0px 100%, 100% 100%, 100% 0px, 0px 0px,
    0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
  );
}
/* This renders a background in an element (or pseudo element) on top of the content. If it can't be clipped, it must not happen. Fallbacks add a css border to it. */
@supports (--foo: , 0 0) and ((clip-path: polygon(0 0, 100% 0, 50% 50%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))) {
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    background: var(--aug-border-bg, none);
  }
}
[augmented-ui~="exe"]::before {
  content: "";
  display: var(--aug-inset-bg, none);
}
[augmented-ui~="inset-el"],
[augmented-ui~="exe"]::before {
  background: var(--aug-inset-bg, none);
  opacity: var(--aug-inset-opacity, 1);
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  clip-path: polygon(
    var(--aug-_TlPathInset2, var(--aug-_WD) var(--aug-_WD))
    var(--aug-_TPathInset2, ),
    var(--aug-_TrPathInset2, var(--aug-_100WD) var(--aug-_WD))
    var(--aug-_RPathInset2, ),
    var(--aug-_BrPathInset2, var(--aug-_100WD) var(--aug-_100WD))
    var(--aug-_BPathInset2, ),
    var(--aug-_BlPathInset2, var(--aug-_WD) var(--aug-_100WD))
    var(--aug-_LPathInset2, )
  );
  z-index: -1;
}

/* exe-init does not clip itself and can not spawn pseudo elements for the border/inset. It allows delegated border-el and inset-el children. */
/* exe-lite clips itself but can not spawn pseudo elements for the border/inset. It allows delegated border-el and inset-el children. */
[augmented-ui~="exe-init"],
[augmented-ui~="exe"],
[augmented-ui~="exe-lite"],
[augmented-ui~="before"]::before,
[augmented-ui~="after"]::after {
  position: relative;
  --aug-border: initial;
  --aug-border-bg: initial;
  --aug-border-opacity: initial;
  --aug-inset: initial;
  --aug-inset-bg: initial;
  --aug-inset-opacity: initial;
  --aug-border-radius-fallback: initial;
  --aug-border-radius-fallback-inset: initial;
  --aug-border-fallback-color: initial;
  --aug-_W: var(--aug-border, 0px);
  --aug-_D: var(--aug-inset, 0px);
  --aug-_WD: calc(var(--aug-_W) + var(--aug-_D));
  --aug-_100W: calc(100% - var(--aug-_W));
  --aug-_100WD: calc(100% - var(--aug-_WD));
}
[augmented-ui~="exe"],
[augmented-ui~="exe-lite"],
[augmented-ui~="before"]::before,
[augmented-ui~="after"]::after {
  clip-path: polygon(
    var(--aug-_TlPath, 0px 0px)
    var(--aug-_TPath, ),
    var(--aug-_TrPath, 100% 0px)
    var(--aug-_RPath, ),
    var(--aug-_BrPath, 100% 100%)
    var(--aug-_BPath, ),
    var(--aug-_BlPath, 0px 100%)
    var(--aug-_LPath, )
  );
}

/* Full featured webkit support: Chrome 51-54, Safari 9.1+, iOS Safari >= 11, Opera 38-41, Opera mobile 46+, UC Browser 12+, Samsung Internet 5+ */
@supports (--foo: , 0 0) and (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%)) and (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) {
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    -webkit-clip-path: polygon(
      var(--aug-_TlPathInset1, var(--aug-_W) var(--aug-_W))
      var(--aug-_TPathInset1, ),
      var(--aug-_TrPathInset1, var(--aug-_100W) var(--aug-_W))
      var(--aug-_RPathInset1, ),
      var(--aug-_BrPathInset1, var(--aug-_100W) var(--aug-_100W))
      var(--aug-_BPathInset1, ),
      var(--aug-_BlPathInset1, var(--aug-_W) var(--aug-_100W))
      var(--aug-_LPathInset1, ),
      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      0px 100%, 100% 100%, 100% 0px, 0px 0px,
      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
    );
  }
  [augmented-ui~="inset-el"],
  [augmented-ui~="exe"]::before {
    -webkit-clip-path: polygon(
      var(--aug-_TlPathInset2, var(--aug-_WD) var(--aug-_WD))
      var(--aug-_TPathInset2, ),
      var(--aug-_TrPathInset2, var(--aug-_100WD) var(--aug-_WD))
      var(--aug-_RPathInset2, ),
      var(--aug-_BrPathInset2, var(--aug-_100WD) var(--aug-_100WD))
      var(--aug-_BPathInset2, ),
      var(--aug-_BlPathInset2, var(--aug-_WD) var(--aug-_100WD))
      var(--aug-_LPathInset2, )
    );
  }
  [augmented-ui~="exe"],
  [augmented-ui~="exe-lite"],
  [augmented-ui~="before"]::before,
  [augmented-ui~="after"]::after {
    -webkit-clip-path: polygon(
      var(--aug-_TlPath, 0px 0px)
      var(--aug-_TPath, ),
      var(--aug-_TrPath, 100% 0px)
      var(--aug-_RPath, ),
      var(--aug-_BrPath, 100% 100%)
      var(--aug-_BPath, ),
      var(--aug-_BlPath, 0px 100%)
      var(--aug-_LPath, )
    );
  }
}

/* Eliptical border radius fallback. (browsers without (-webkit-)clip-path or browsers that don't supprot css vars with leading or trailing commas) */
/* pre chromium Edge and safari iOS < 11 */
@supports (not ((--foo: , 0 0) and ((clip-path: polygon(0 0, 100% 0, 50% 50%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))))) {
  /* vvv almost all of the code here avoids this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17410857/ for 5 layers of inheritance vvv */

  /* Step 1: set up any pseduo-level vars on main elements first (setup for any el that uses them to avoid repeat, not just pseudo parents) */
  [augmented-ui~="exe"],
  [augmented-ui~="before"],
  [augmented-ui~="after"],
  [augmented-ui~="border-el"] {
    --aug-_AutoBorderRadiusFallback: var(--aug-_TlWidth, var(--aug-tl, 0px))
                                     var(--aug-_TrWidth, var(--aug-tr, 0px))
                                     var(--aug-_BrWidth, var(--aug-br, 0px))
                                     var(--aug-_BlWidth, var(--aug-bl, 0px)) /
                                     var(--aug-_TlHeight, var(--aug-tl, 0px))
                                     var(--aug-_TrHeight, var(--aug-tr, 0px))
                                     var(--aug-_BrHeight, var(--aug-br, 0px))
                                     var(--aug-_BlHeight, var(--aug-bl, 0px));
    /* used on main el (or main el pseudo delegates) and main exe::after / border-el */
    --aug-_PrimaryBorderRadiusFallbackResolved: var(--aug-border-radius-fallback, var(--aug-_AutoBorderRadiusFallback));
  }
  [augmented-ui~="exe"],
  [augmented-ui~="inset-el"] {
    --aug-_InsetAutoBorderRadiusFallback: calc(var(--aug-_TlWidth, var(--aug-tl, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_TrWidth, var(--aug-tr, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BrWidth, var(--aug-br, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BlWidth, var(--aug-bl, 0px)) - var(--aug-_WD, 0px)) /
                                          calc(var(--aug-_TlHeight, var(--aug-tl, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_TrHeight, var(--aug-tr, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BrHeight, var(--aug-br, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BlHeight, var(--aug-bl, 0px)) - var(--aug-_WD, 0px));
    /* used on exe::before and inset-el */
    --aug-_InsetBorderRadiusFallbackResolved: var(--aug-border-radius-fallback-inset, var(--aug-_InsetAutoBorderRadiusFallback));
    --aug-_InsetDistanceResolved: var(--aug-_WD, 0px);
    --aug-_InsetBGResolved: var(--aug-inset-bg, none);
    --aug-_InsetOpacityResolved: var(--aug-inset-opacity, 1);
  }
  [augmented-ui~="exe"],
  [augmented-ui~="border-el"] {
    --aug-_BorderNoColorResolved: var(--aug-_W, 0px) solid;
    --aug-_BorderColorResolved: var(--aug-border-fallback-color, var(--aug-border-bg, transparent));
    --aug-_BorderOpacityResolved: var(--aug-border-opacity, 1);
  }

  /* Step 2: apply CSS as normal to their respective parts, using only resolved form of vars as needed */
  [augmented-ui~="inset-el"],
  [augmented-ui~="exe"]::before {
    left: var(--aug-_InsetDistanceResolved);
    top: var(--aug-_InsetDistanceResolved);
    right: var(--aug-_InsetDistanceResolved);
    bottom: var(--aug-_InsetDistanceResolved);
    border-radius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    background: var(--aug-_InsetBGResolved);
    opacity: var(--aug-_InsetOpacityResolved);
    /* clip-path causes a new stacking context and hides overflow, this reproduces that */
    transform: translateZ(0px);
    overflow: hidden;
  }
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    overflow: hidden;
    transform: translateZ(0px);
    background: transparent!important;
    border-radius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    border: var(--aug-_BorderNoColorResolved) var(--aug-_BorderColorResolved);
    opacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui~="exe"],
  [augmented-ui~="before"]::before,
  [augmented-ui~="after"]::after {
    border-radius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    /* clip-path causes a new stacking context and hides overflow, this reproduces that */
    transform: translateZ(0px);
    overflow: hidden;
  }

  /* Step 3 part 1: For any pseudo children using resoved vars,
     create duplicate vars, with depth dependent names, of each resolved var on their parent, for the first depth,
     then use the depth copy on pseudo children of that depth to override the broken one
  */
  [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH1_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH1_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH1_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH1_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH1_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH1_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH1_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH1_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }