@import '../_mmi-variables.scss';

.bubble,
.mmi {
  display: block;
  line-height: 1;
  text-align: center;

  > span {
    display: block;
    max-width: 100%;
    color: #000;
  }

  > abbr {
    color: #666;
    font-size: 0.8em;
  }
}

.bubble-border,
.mmi {
  border-radius: 2px;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 0.5em 0;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.roman {
  font-family: $mmi-font-family;
}

.mmiI {
  background-color: $mmiI !important;
  box-shadow: 0 0 1px #666;
  color: $mmiI-text-color !important;
}

.mmiII{
  background-color: $mmiII !important;
  color: $mmiII-text-color !important;
}

.mmiIII {
  background-color: $mmiIII !important;
  color: $mmiIII-text-color !important;
}

.mmiIV {
  background-color: $mmiIV !important;
  color: $mmiIV-text-color !important;
}

.mmiV {
  background-color: $mmiV !important;
  color: $mmiV-text-color !important;
}

.mmiVI {
  background-color: $mmiVI !important;
  color: $mmiVI-text-color !important;
}

.mmiVII {
  background-color: $mmiVII !important;
  color: $mmiVII-text-color !important;
}

.mmiVIII {
  background-color: $mmiVIII !important;
  color: $mmiVIII-text-color !important;
}

.mmiIX {
  background-color: $mmiIX !important;
  color: $mmiIX-text-color !important;
}

.mmiX {
  background-color: $mmiX !important;
  color: $mmiX-text-color !important;
}

.mmiXI {
  background-color: $mmiXI !important;
  color: $mmiXI-text-color !important;
}

.mmiXII {
  background-color: $mmiXII !important;
  color: $mmiXII-text-color !important;
}