/*
Frames are structural bases
*/

.frame-dense {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 3px 11px;
  vertical-align: middle;
}

.frame-basic {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 7px 15px;
  vertical-align: middle;
}

.frame-plush {
  border-image: none;
  border-radius: var(--radii-medium);
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: 11px 23px;
  vertical-align: middle;
}

/*
Use unicode zero-width space to ensure height is as intended when empty.
This technique is line-height agnostic.
https://stackoverflow.com/q/48469414/770127
https://stackoverflow.com/a/29355130/770127
*/
.frame-dense:empty::before,
.frame-basic:empty::before,
.frame-plush:empty::before {
  content: "\200b";
}