/* xeyes CSS Styling */
.xeyes-container {
  --xeyes-scale: 1;
  --xeyes-rim-color: rgba(0,0,0,1);
  --xeyes-rim-style: solid;
  --xeyes-rim-thickness: calc(var(--xeyes-scale) * 7px);
  --xeyes-eye-color: #fff;
  --xeyes-pupil-color: #000;
  --xeyes-iris-color: #000;
  --xeyes-iris-breadth: calc(var(--xeyes-scale) * 7px);
  --xeyes-iris-diameter: calc(var(--xeyes-scale) * 25px);

  display: flex;
  width: 100%;
  height: 100%;
}

.xeyes-eyes {
  display: flex;
  gap: calc(var(--xeyes-rim-thickness) * 2);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.xeyes-eye {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 110 / 150;
  max-width: calc(50% - var(--xeyes-rim-thickness) * 2);
  background: var(--xeyes-eye-color);
  border-radius: 50%;
  border-width: var(--xeyes-rim-thickness);
  border-style: var(--xeyes-rim-style);
  border-color: var(--xeyes-rim-color);
  position: relative;
  overflow: hidden;
}

.xeyes-iris {
  background: var(--xeyes-pupil-color);
  width: calc(var(--xeyes-iris-diameter) - var(--xeyes-iris-breadth) * 2);
  height: calc(var(--xeyes-iris-diameter) - var(--xeyes-iris-breadth) * 2);
  border-radius: 50%;
  border: var(--xeyes-iris-breadth) solid var(--xeyes-iris-color);
  position: absolute;
}