.common.dropdown{
  width: 260px}
  .common.dropdown > .group > .item{
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    font-size: var(--m_font);
    grid-auto-columns: min-content;
    grid-gap: var(--m_gap);
    grid-template-columns: auto 1fr auto;
    padding: var(--m_gap)}
  .common.dropdown > .group:first-child > .item:first-child{
    border-radius: var(--s_gap) var(--s_gap) 0 0}
  .common.dropdown .group:last-child > .item:last-child{
    border-radius: 0 0 var(--s_gap) var(--s_gap)}
  .common.dropdown > .group:first-child:last-child > .item:first-child:last-child{
    border-radius: var(--s_gap)}
    .dropdown > .group > .item > svg{
      height: var(--m_font);
      width: var(--m_font)}
  .common.dropdown.gray > .group{
    border-bottom: 1px solid var(--gray_4)}
  .common.dropdown.gray > .group:last-child{
    border-bottom: none}
    .common.dropdown > .group > .item.gray:hover{
      background: var(--gray_4)}
      .common.dropdown > .group >.item.gray > svg{
        fill: var(--gray_2)}
    .common.dropdown > .group > .item.red{
        color: var(--red_2)}
    .common.dropdown > .group > .item.red:hover{
      background: var(--red_4)}
        .common.dropdown > .group > .item.red > svg{
          fill: var(--red_2)}
    .common.dropdown > .group >.item.green{
        color: var(--green_2)}
    .common.dropdown > .group >.item.green:hover{
      background: var(--green_4)}
        .common.dropdown > .group >.item.green > svg{
          fill: var(--green_2)}