:root {
  --background-color: #f0f0f0;
  --box-color: #3498db;
  --corner-color: #190088;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color);
  overflow: hidden;
}

.experiment-container {
  position: relative;
  width: calc(100vw - 240px); /* 240px is the width of the controls */
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 160px;
  height: 48px;
  background-color: transparent;
  z-index: 2;
}

.animated {
  animation-play-state: paused;
}

/* 
 * CSS 6-Patch 
 */
.mode-css-6-patch .band-horizontal {
  position: absolute;
  top: var(--corner-radius);
  left: 0;
  width: 100%;
  height: 0;
  transform-origin: center center;
  background-color: var(--box-color);
}

.mode-css-6-patch .band-vertical {
  position: absolute;
  top: 0;
  left: var(--corner-radius);
  width: 0;
  height: 100%;
  transform-origin: center center;
  background-color: var(--box-color);
}

/* Corners */
.mode-css-6-patch .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--box-color);
  z-index: 1;
}

/* TL */
.mode-css-6-patch .corner.top-left {
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border-top-left-radius: var(--corner-radius, 15px);
}

/* TR */
.mode-css-6-patch .corner.top-right {
  top: 0;
  right: 0;
  transform-origin: 100% 0;
  border-top-right-radius: var(--corner-radius, 15px);
}

/* BL */
.mode-css-6-patch .corner.bottom-left {
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
  border-bottom-left-radius: var(--corner-radius, 15px);
}

/* BR */
.mode-css-6-patch .corner.bottom-right {
  bottom: 0;
  right: 0;
  transform-origin: 100% 100%;
  border-bottom-right-radius: var(--corner-radius, 15px);
}

/* 
 * CSS 5-Patch 
 */
.mode-css-5-patch .box {
  background-color: var(--box-color);
}

.mode-css-5-patch .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--background-color);
  z-index: 1;
}

.mode-css-5-patch .corner-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--box-color);
  transform: translateZ(0);
  z-index: 3;
}

/* TL */
.mode-css-5-patch .corner.top-left {
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.mode-css-5-patch .top-left .corner-inner {
  border-top-left-radius: var(--corner-radius, 15px);
}

/* TR */
.mode-css-5-patch .corner.top-right {
  top: 0;
  right: 0;
  transform-origin: 100% 0;
}

.mode-css-5-patch .top-right .corner-inner {
  border-top-right-radius: var(--corner-radius, 15px);
}

/* BL */
.mode-css-5-patch .corner.bottom-left {
  bottom: 0;
  left: 0;
  transform-origin: 0 100%;
}

.mode-css-5-patch .bottom-left .corner-inner {
  border-bottom-left-radius: var(--corner-radius, 15px);
}

/* BR */
.mode-css-5-patch .corner.bottom-right {
  bottom: 0;
  right: 0;
  transform-origin: 100% 100%;
}

.mode-css-5-patch .bottom-right .corner-inner {
  border-bottom-right-radius: var(--corner-radius, 15px);
}

/* 
 * CSS Basic 
 */
.mode-css-basic .box {
  background-color: var(--box-color);
}

/* 
 * SVG
 */
.mode-svg svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 160px;
  height: 48px;
  background-color: transparent;
  z-index: 2;
}

/* Debug Styles */
.debug .band-horizontal {
  background-color: rgba(255, 204, 0, 0.6);
}

.debug .band-vertical {
  background-color: rgba(255, 0, 0, 0.4);
}

.debug .corner {
  background-color: rgba(68, 168, 255, 0.75);
}

.debug .mode-css-5-patch .box {
  background-color: rgba(255, 0, 0, 0.4);
}

.debug .mode-css-5-patch .corner {
  background-color: rgba(255, 204, 0, 0.6);
}

.debug .corner-inner {
  background-color: rgba(68, 168, 255, 0.75);
}