.mobileRowContainer {
  display: block;
  width: calc(100% - 16px);
  font-size: var(--font-size-12);
}

.activeMobileRow {
  font-weight: var(--font-weight-semibold);
  background: var(--light-blue);
}

.verticalPadding {
  padding-top: 16px;
  padding-bottom: 16px;
}

.horizontalPadding {
  padding-left: 8px;
  padding-right: 8px;
}

.optionRow {
  @extend .verticalPadding;
  @extend .horizontalPadding;
  display: flex;
  text-transform: capitalize;
}

.leftMargin {
  margin-left: 4px;
}

.iconL {
  margin-right: 8px;
  // Using 6px height and width for the 'L' icon. Our minimum size of 8px is too large for this. UX suggested that we keep 6px.
  svg {
    height: 6px;
    width: 6px;
  }
}

.subrowOptionIcon {
  padding-left: 8px;
  display: flex;
  align-items: center;
}