@use 'src/styles/abstracts' as *;

.AttachedTagsList {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: $text-sm;
  line-height: 15px;
  position: relative;
  margin-top: $space-xs;

  &__title {
    text-transform: uppercase;
    color: $pico-50;
    font-weight: $font-500;
  }

  &__noAttachedTags {
    font-weight: $font-500;
    font-size: $text-sm;
    color: $pico-70;
    margin-right: $space-unit;
  }

  &__tags {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    &__tagWrapper {
      max-width: 100%;
    }

    .Badge {
      margin-bottom: $space-xs;
      margin-right: $space-xs;
      max-width: 100%;
    }
  }

  &__ControlPopover__anchor {
    max-width: 100%;
    .icon-edit {
      width: 1.5rem;
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $pico-50;
    }

    &.active {
      .icon-edit {
        color: $pico-70;
      }
    }
  }

  &__ControlPopover__attach {
    .icon-plus {
      margin-right: $space-xs;
    }
  }

  &__ControlPopover__editPopoverButton {
    position: absolute;
    top: toRem(-26px);
    right: 0;
  }
}

.InlineAttachedTagsList {
  margin-top: 0;
  align-items: center;
  max-width: 100%;
  width: 100%;
  .AttachedTagsList__ControlPopover__anchor {
    max-width: 100%;
    width: 100%;
  }
  .AttachedTagsList__tags {
    align-items: center;
    flex-wrap: unset;
    overflow: hidden;
    .Badge {
      margin-bottom: 0;
    }
  }
  &__tagsContainer {
    max-width: 20rem;
    width: 20rem;
    &__tags {
      padding: $space-xs $space-unit;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      max-height: 50vh;

      .Badge {
        margin: 0;
        max-width: unset;
        cursor: pointer;
      }

      .icon-check {
        padding: 0;
      }

      &__badge {
        display: inline-block;
        margin-bottom: $space-xs;
        margin-right: $space-xs;
      }
    }
  }
}
