@zaui-disabled-bg: var(--zaui-disabled-bg);

.pro-enum {
  &-tag-root {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  &-group-root-disabled {
    color: rgba(0, 0, 0, 0.25);
    .pro-enum-group-item {
      cursor: not-allowed !important;
    }
  }
  &-tag-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--zaui-space-size-sm);
    padding: var(--zaui-space-size-xs) 10px;
    background-color: var(--zaui-disabled-bg);
    border-radius: var(--zaui-space-size-xs);
    cursor: pointer;
  }

  &-tag-item-selected {
    color: #fff;
    background-color: var(--zaui-brand);
  }
  &-tag-item-disabled {
    background-color: var(--zaui-disabled-bg);
    pointer-events: none;
  }

  &-group-root {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .pro-enum-group-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px var(--zaui-space-border);
      line-height: 18px;
      background-color: #f1f3f6ff;
      border: 1px solid transparent;
      cursor: pointer;

      &::after {
        position: absolute;
        top: var(--zaui-space-size-sm);
        right: -2px;
        bottom: var(--zaui-space-size-sm);
        z-index: 1;
        width: 1px;
        background: var(--zaui-brand);
        opacity: 0.7;
        content: '';
      }

      &:first-child {
        border-top-left-radius: var(--zaui-space-size-xs);
        border-bottom-left-radius: var(--zaui-space-size-xs);
      }

      &:last-child {
        border-top-right-radius: var(--zaui-space-size-xs);
        border-bottom-right-radius: var(--zaui-space-size-xs);
        &::after {
          background: transparent;
        }
      }
    }

    .pro-enum-group-item-selected {
      background: var(--zaui-brand);
      color: #fff;
      border: 1px solid var(--zaui-brand);
      &::after {
        background: transparent;
      }
    }

    .pro-enum-group-item-disabled-after::after {
      background: transparent;
    }

    .pro-enum-group-item-disabled {
      color: rgba(0, 0, 0, 0.25);
      background: var(--zaui-disabled-bg);
      cursor: not-allowed;
    }
  }

  &-group-root-disabled {
    color: var(--zaui-aide-text);

    .pro-enum-group-item {
      background: var(--zaui-disabled-bg);
      &.pro-enum-group-item-selected {
        background: var(--zaui-brand-disabled);
        border-color: var(--zaui-brand-disabled);
      }
    }
  }
}