// Widget container
.widget {
  position: absolute;
  margin: auto;
  width: max-content;
  height: max-content;
  display: grid;
}

.widgetInner {
  width: 100%;
}

// Widget positions
.nw {
  inset: 0 auto auto 0;
}

.n {
  inset: 0 0 auto 0;
}

.ne {
  inset: 0 0 auto auto;
}

.w {
  inset: 0 auto 0 0;
}

.c {
  inset: 0;
}

.e {
  inset: 0 0 0 auto;
}

.sw {
  inset: auto auto 0 0;
}

.s {
  inset: auto 0 0 0;
}

.se {
  inset: auto 0 0 auto;
}

// Widget positions
.container-nw {
  align-items: start;
  justify-content: start;
  text-align: left;
}

.container-n {
  align-items: start;
  justify-content: center;
  text-align: center;
}

.container-ne,
.container-ne > .widgetInner {
  align-items: start;
  justify-content: end;
  text-align: right;
}

.container-w {
  align-items: center;
  justify-content: start;
  text-align: left;
}

.container-c {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.container-e {
  align-items: center;
  justify-content: end;
  text-align: right;
}

.container-sw {
  align-items: end;
  justify-content: start;
  text-align: left;
}

.container-s {
  align-items: end;
  justify-content: center;
  text-align: center;
}

.container-se {
  align-items: end;
  justify-content: end;
  text-align: right;
}
