@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.election-result-list-badge {
  .badge-inner {
    padding: 6px 15px;
    background: var(--theme-color-primary-dimmed-04);
    border-radius: 18px;
    margin-bottom: 8px;
  }
  p {
    font-family: "Korb", sans-serif;
    font-weight: bold;
    margin: 0;
    span {
      padding-left: 5px;
      font-weight: normal;
    }
  }
  &.inverted {
    p {
      color: var(--theme-color-white);
      transition: 0.25s ease;
    }
    .badge-inner {
      background: var(--theme-color-primary);
      transition: 0.25s ease;
      &:hover {
        background-color: var(--theme-color-primary-dimmed-04);
        p {
          color: var(--theme-color-primary);
        }
      }
    }
  }
  &.closable {
    cursor: pointer;
    .badge-inner {
      padding-left: 48px;
      position: relative;
      &:before {
        @include icon-schliessen;
        font-family: 'Icons', sans-serif;
        position: absolute;
        left: 15px;
        top: 50%;
        margin-top: -9px;
        color: var(--theme-color-white);
        display: block;
        text-align: center;
        font-size: 18px;
        line-height: 1;
        transition: 0.25s ease;
      }
      &:hover:before {
        color: var(--theme-color-primary);
      }
    }
  }
}