/* Pop-Pop.css */
/* Defaults & variables */
:root {
  --pop-text-color: var(--blush);
  --pop-bg-color: var(--periwinkle);
  --pop-min-width: 0px;
  --pop-word-wrap: none;
  --pop-white-space: nowrap;
  --pop-shadow-color: #252525;
  --pop-shadow: 0px 0px 5px var(--pop-shadow-color);
  --pop-transition-delay: 0;
  --pop-animation-speed: 0.1s;
  --pop-border-radius: 5px;
  --pop-padding: 8px;
  --pop-offset: 0px;
  --pop-font-size: 12px;
  --pop-arrow-size: 5px;
  --pop-z: 999; }

/* Mixins */
/* SCSS */
[data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label], [data-pop="top"][aria-label] {
  position: relative; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label]::after, [data-pop="top"][aria-label]::after {
    opacity: 0;
    content: "";
    bottom: calc(100% + var(--pop-offset));
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%); }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-arrow]::before, [data-pop="top"][aria-label][data-pop-arrow]::before {
    opacity: 0;
    content: "";
    bottom: calc(100% + var(--pop-offset) - (2*var(--pop-arrow-size)));
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    border-color: var(--pop-bg-color) transparent transparent transparent; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-arrow]:hover::before, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-arrow]:focus::before, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-show]::before, [data-pop="top"][aria-label][data-pop-arrow]:hover::before, [data-pop="top"][aria-label][data-pop-arrow]:focus::before, [data-pop="top"][aria-label][data-pop-show]::before {
    opacity: 1;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    border-style: solid;
    border-width: var(--pop-arrow-size);
    z-index: calc(var(--pop-z) + 1); }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label]:focus::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-show]::after, [data-pop="top"][aria-label]:hover::after, [data-pop="top"][aria-label]:focus::after, [data-pop="top"][aria-label][data-pop-show]::after {
    opacity: 1;
    content: attr(aria-label);
    min-width: var(--pop-min-width);
    width: auto;
    text-align: center;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    color: var(--pop-text-color);
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-shadow);
    -webkit-box-shadow: var(--pop-shadow);
    -moz-box-shadow: var(--pop-shadow);
    background-color: var(--pop-bg-color);
    padding: var(--pop-padding);
    font-size: var(--pop-font-size);
    line-height: var(--pop-font-size);
    white-space: var(--pop-white-space);
    word-wrap: var(--pop-word-wrap);
    z-index: var(--pop-z); }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="short"]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="short"]:hover::before, [data-pop="top"][aria-label][data-pop-delay="short"]:hover::after, [data-pop="top"][aria-label][data-pop-delay="short"]:hover::before {
    transition-delay: 0.5s; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="medium"]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="medium"]:hover::before, [data-pop="top"][aria-label][data-pop-delay="medium"]:hover::after, [data-pop="top"][aria-label][data-pop-delay="medium"]:hover::before {
    transition-delay: 1.5s; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="long"]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-delay="long"]:hover::before, [data-pop="top"][aria-label][data-pop-delay="long"]:hover::after, [data-pop="top"][aria-label][data-pop-delay="long"]:hover::before {
    transition-delay: 3s; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-no-radius]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-no-radius]:focus::after, [data-pop="top"][aria-label][data-pop-no-radius]:hover::after, [data-pop="top"][aria-label][data-pop-no-radius]:focus::after {
    border-radius: 0px; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-no-shadow]:hover::after, [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-no-shadow]:focus::after, [data-pop="top"][aria-label][data-pop-no-shadow]:hover::after, [data-pop="top"][aria-label][data-pop-no-shadow]:focus::after {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none; }
  [data-pop]:not([data-pop="bottom"]):not([data-pop="right"]):not([data-pop="left"])[aria-label][data-pop-multiline]::after, [data-pop="top"][aria-label][data-pop-multiline]::after {
    white-space: normal;
    word-wrap: break-word;
    min-width: 120px; }

[data-pop="bottom"][aria-label] {
  position: relative; }
  [data-pop="bottom"][aria-label]::after {
    opacity: 0;
    content: "";
    top: calc(100% + var(--pop-offset));
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%); }
  [data-pop="bottom"][aria-label][data-pop-arrow]::before {
    opacity: 0;
    content: "";
    top: calc(100% + var(--pop-offset) - (2*var(--pop-arrow-size)));
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    border-color: transparent transparent var(--pop-bg-color) transparent; }
  [data-pop="bottom"][aria-label][data-pop-arrow]:hover::before, [data-pop="bottom"][aria-label][data-pop-arrow]:focus::before, [data-pop="bottom"][aria-label][data-pop-show]::before {
    opacity: 1;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    border-style: solid;
    border-width: var(--pop-arrow-size);
    z-index: calc(var(--pop-z) + 1); }
  [data-pop="bottom"][aria-label]:hover::after, [data-pop="bottom"][aria-label]:focus::after, [data-pop="bottom"][aria-label][data-pop-show]::after {
    opacity: 1;
    content: attr(aria-label);
    min-width: var(--pop-min-width);
    width: auto;
    text-align: center;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    color: var(--pop-text-color);
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-shadow);
    -webkit-box-shadow: var(--pop-shadow);
    -moz-box-shadow: var(--pop-shadow);
    background-color: var(--pop-bg-color);
    padding: var(--pop-padding);
    font-size: var(--pop-font-size);
    line-height: var(--pop-font-size);
    white-space: var(--pop-white-space);
    word-wrap: var(--pop-word-wrap);
    z-index: var(--pop-z); }
  [data-pop="bottom"][aria-label][data-pop-delay="short"]:hover::after, [data-pop="bottom"][aria-label][data-pop-delay="short"]:hover::before {
    transition-delay: 0.5s; }
  [data-pop="bottom"][aria-label][data-pop-delay="medium"]:hover::after, [data-pop="bottom"][aria-label][data-pop-delay="medium"]:hover::before {
    transition-delay: 1.5s; }
  [data-pop="bottom"][aria-label][data-pop-delay="long"]:hover::after, [data-pop="bottom"][aria-label][data-pop-delay="long"]:hover::before {
    transition-delay: 3s; }
  [data-pop="bottom"][aria-label][data-pop-no-radius]:hover::after, [data-pop="bottom"][aria-label][data-pop-no-radius]:focus::after {
    border-radius: 0px; }
  [data-pop="bottom"][aria-label][data-pop-no-shadow]:hover::after, [data-pop="bottom"][aria-label][data-pop-no-shadow]:focus::after {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none; }
  [data-pop="bottom"][aria-label][data-pop-multiline]::after {
    white-space: normal;
    word-wrap: break-word;
    min-width: 120px; }

[data-pop="left"][aria-label] {
  position: relative; }
  [data-pop="left"][aria-label]::after {
    opacity: 0;
    content: "";
    right: calc(100% + var(--pop-offset));
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%); }
  [data-pop="left"][aria-label][data-pop-arrow]::before {
    opacity: 0;
    content: "";
    right: calc(100% + var(--pop-offset) - (2*var(--pop-arrow-size)));
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    border-color: transparent transparent transparent var(--pop-bg-color); }
  [data-pop="left"][aria-label][data-pop-arrow]:hover::before, [data-pop="left"][aria-label][data-pop-arrow]:focus::before, [data-pop="left"][aria-label][data-pop-show]::before {
    opacity: 1;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    border-style: solid;
    border-width: var(--pop-arrow-size);
    z-index: calc(var(--pop-z) + 1); }
  [data-pop="left"][aria-label]:hover::after, [data-pop="left"][aria-label]:focus::after, [data-pop="left"][aria-label][data-pop-show]::after {
    opacity: 1;
    content: attr(aria-label);
    min-width: var(--pop-min-width);
    width: auto;
    text-align: center;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    color: var(--pop-text-color);
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-shadow);
    -webkit-box-shadow: var(--pop-shadow);
    -moz-box-shadow: var(--pop-shadow);
    background-color: var(--pop-bg-color);
    padding: var(--pop-padding);
    font-size: var(--pop-font-size);
    line-height: var(--pop-font-size);
    white-space: var(--pop-white-space);
    word-wrap: var(--pop-word-wrap);
    z-index: var(--pop-z); }
  [data-pop="left"][aria-label][data-pop-delay="short"]:hover::after, [data-pop="left"][aria-label][data-pop-delay="short"]:hover::before {
    transition-delay: 0.5s; }
  [data-pop="left"][aria-label][data-pop-delay="medium"]:hover::after, [data-pop="left"][aria-label][data-pop-delay="medium"]:hover::before {
    transition-delay: 1.5s; }
  [data-pop="left"][aria-label][data-pop-delay="long"]:hover::after, [data-pop="left"][aria-label][data-pop-delay="long"]:hover::before {
    transition-delay: 3s; }
  [data-pop="left"][aria-label][data-pop-no-radius]:hover::after, [data-pop="left"][aria-label][data-pop-no-radius]:focus::after {
    border-radius: 0px; }
  [data-pop="left"][aria-label][data-pop-no-shadow]:hover::after, [data-pop="left"][aria-label][data-pop-no-shadow]:focus::after {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none; }
  [data-pop="left"][aria-label][data-pop-multiline]::after {
    white-space: normal;
    word-wrap: break-word;
    min-width: 120px; }

[data-pop="right"][aria-label] {
  position: relative; }
  [data-pop="right"][aria-label]::after {
    opacity: 0;
    content: "";
    left: calc(100% + var(--pop-offset));
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%); }
  [data-pop="right"][aria-label][data-pop-arrow]::before {
    opacity: 0;
    content: "";
    left: calc(100% + var(--pop-offset) - (2*var(--pop-arrow-size)));
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    border-color: transparent var(--pop-bg-color) transparent transparent; }
  [data-pop="right"][aria-label][data-pop-arrow]:hover::before, [data-pop="right"][aria-label][data-pop-arrow]:focus::before, [data-pop="right"][aria-label][data-pop-show]::before {
    opacity: 1;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    border-style: solid;
    border-width: var(--pop-arrow-size);
    z-index: calc(var(--pop-z) + 1); }
  [data-pop="right"][aria-label]:hover::after, [data-pop="right"][aria-label]:focus::after, [data-pop="right"][aria-label][data-pop-show]::after {
    opacity: 1;
    content: attr(aria-label);
    min-width: var(--pop-min-width);
    width: auto;
    text-align: center;
    transition: opacity var(--pop-animation-speed) linear;
    transition-delay: var(--pop-transition-delay);
    position: absolute;
    color: var(--pop-text-color);
    border-radius: var(--pop-border-radius);
    box-shadow: var(--pop-shadow);
    -webkit-box-shadow: var(--pop-shadow);
    -moz-box-shadow: var(--pop-shadow);
    background-color: var(--pop-bg-color);
    padding: var(--pop-padding);
    font-size: var(--pop-font-size);
    line-height: var(--pop-font-size);
    white-space: var(--pop-white-space);
    word-wrap: var(--pop-word-wrap);
    z-index: var(--pop-z); }
  [data-pop="right"][aria-label][data-pop-delay="short"]:hover::after, [data-pop="right"][aria-label][data-pop-delay="short"]:hover::before {
    transition-delay: 0.5s; }
  [data-pop="right"][aria-label][data-pop-delay="medium"]:hover::after, [data-pop="right"][aria-label][data-pop-delay="medium"]:hover::before {
    transition-delay: 1.5s; }
  [data-pop="right"][aria-label][data-pop-delay="long"]:hover::after, [data-pop="right"][aria-label][data-pop-delay="long"]:hover::before {
    transition-delay: 3s; }
  [data-pop="right"][aria-label][data-pop-no-radius]:hover::after, [data-pop="right"][aria-label][data-pop-no-radius]:focus::after {
    border-radius: 0px; }
  [data-pop="right"][aria-label][data-pop-no-shadow]:hover::after, [data-pop="right"][aria-label][data-pop-no-shadow]:focus::after {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none; }
  [data-pop="right"][aria-label][data-pop-multiline]::after {
    white-space: normal;
    word-wrap: break-word;
    min-width: 120px; }