/*
  data-augmented-ui
  BSD 2-Clause License
  Copyright (c) James0x57, PropJockey, 2019
*/
/* exe */
.ac-pushButton {
  --aug-tl: 0px;
  --aug-tl-width: initial;
  --aug-tl-height: initial;
  --aug-_TlWidth: initial;
  --aug-_TlHeight: initial;
  --aug-_TlJoinBX: initial;
  --aug-_TlJoinBY: initial;
  --aug-_TlJoinRX: initial;
  --aug-_TlJoinRY: initial;
  --aug-_TlPath: initial;
  --aug-_TlInset1JoinBX: initial;
  --aug-_TlInset1JoinBY: initial;
  --aug-_TlInset1JoinRX: initial;
  --aug-_TlInset1JoinRY: initial;
  --aug-_TlPathInset1: initial;
  --aug-_TlInset2JoinBX: initial;
  --aug-_TlInset2JoinBY: initial;
  --aug-_TlInset2JoinRX: initial;
  --aug-_TlInset2JoinRY: initial;
  --aug-_TlPathInset2: initial;
  --aug-tr: 0px;
  --aug-tr-width: initial;
  --aug-tr-height: initial;
  --aug-_TrWidth: initial;
  --aug-_TrHeight: initial;
  --aug-_TrJoinLX: initial;
  --aug-_TrJoinLY: initial;
  --aug-_TrJoinBX: initial;
  --aug-_TrJoinBY: initial;
  --aug-_TrPath: initial;
  --aug-_TrInset1JoinLX: initial;
  --aug-_TrInset1JoinLY: initial;
  --aug-_TrInset1JoinBX: initial;
  --aug-_TrInset1JoinBY: initial;
  --aug-_TrPathInset1: initial;
  --aug-_TrInset2JoinLX: initial;
  --aug-_TrInset2JoinLY: initial;
  --aug-_TrInset2JoinBX: initial;
  --aug-_TrInset2JoinBY: initial;
  --aug-_TrPathInset2: initial;
  --aug-br: 0px;
  --aug-br-width: initial;
  --aug-br-height: initial;
  --aug-_BrWidth: initial;
  --aug-_BrHeight: initial;
  --aug-_BrJoinTX: initial;
  --aug-_BrJoinTY: initial;
  --aug-_BrJoinLX: initial;
  --aug-_BrJoinLY: initial;
  --aug-_BrPath: initial;
  --aug-_BrInset1JoinTX: initial;
  --aug-_BrInset1JoinTY: initial;
  --aug-_BrInset1JoinLX: initial;
  --aug-_BrInset1JoinLY: initial;
  --aug-_BrPathInset1: initial;
  --aug-_BrInset2JoinTX: initial;
  --aug-_BrInset2JoinTY: initial;
  --aug-_BrInset2JoinLX: initial;
  --aug-_BrInset2JoinLY: initial;
  --aug-_BrPathInset2: initial;
  --aug-bl: 0px;
  --aug-bl-width: initial;
  --aug-bl-height: initial;
  --aug-_BlWidth: initial;
  --aug-_BlHeight: initial;
  --aug-_BlJoinRX: initial;
  --aug-_BlJoinRY: initial;
  --aug-_BlJoinTX: initial;
  --aug-_BlJoinTY: initial;
  --aug-_BlPath: initial;
  --aug-_BlInset1JoinRX: initial;
  --aug-_BlInset1JoinRY: initial;
  --aug-_BlInset1JoinTX: initial;
  --aug-_BlInset1JoinTY: initial;
  --aug-_BlPathInset1: initial;
  --aug-_BlInset2JoinRX: initial;
  --aug-_BlInset2JoinRY: initial;
  --aug-_BlInset2JoinTX: initial;
  --aug-_BlInset2JoinTY: initial;
  --aug-_BlPathInset2: initial;
  --aug-t: 0px;
  --aug-t-width: initial;
  --aug-t-height: initial;
  --aug-t-origin-x: initial;
  --aug-t-offset: initial;
  --aug-_TWidth: initial;
  --aug-_THeight: initial;
  --aug-_TPath: initial;
  --aug-_TPathInset1: initial;
  --aug-_TPathInset2: initial;
  --aug-r: 0px;
  --aug-r-width: initial;
  --aug-r-height: initial;
  --aug-r-origin-y: initial;
  --aug-r-offset: initial;
  --aug-_RWidth: initial;
  --aug-_RHeight: initial;
  --aug-_RPath: initial;
  --aug-_RPathInset1: initial;
  --aug-_RPathInset2: initial;
  --aug-b: 0px;
  --aug-b-width: initial;
  --aug-b-height: initial;
  --aug-b-origin-x: initial;
  --aug-b-offset: initial;
  --aug-_BWidth: initial;
  --aug-_BHeight: initial;
  --aug-_BPath: initial;
  --aug-_BPathInset1: initial;
  --aug-_BPathInset2: initial;
  --aug-l: 0px;
  --aug-l-width: initial;
  --aug-l-height: initial;
  --aug-l-origin-y: initial;
  --aug-l-offset: initial;
  --aug-_LWidth: initial;
  --aug-_LHeight: initial;
  --aug-_LPath: initial;
  --aug-_LPathInset1: initial;
  --aug-_LPathInset2: initial;
}

/* 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. */
.ac-pushButton {
  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));
}
.ac-pushButton {
  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, )
  );
}


/* tl-clip */
.ac-pushButton {
  --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);
}

/* br-clip */
.ac-pushButton  {
  --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);
}

/* exe after */
.ac-pushButton::after {
  content: "";
  display: var(--color-border, none);
  background: var(--color-border, none) !important;
  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))
  );
}

/* exe before  */
.ac-pushButton::before {
  content: "";
  display: var(--aug-inset-bg, none);
}
/* exe before inset-el */
.ac-pushButton::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;
}