@include export-module('co-transaction-tags-layout') {
  .co-transaction-tags {
    font-family: $tp-co-transaction-tags-font-family;
    font-size: $tp-co-transaction-tags-font-size;
    .transaction-tags-wrapper {
      display: flex;
      column-gap: $tp-co-transaction-tags-column-gap;
      align-items: center;
      .edit-tags-wrapper {
        display: flex;
        column-gap: $tp-co-transaction-tags-column-gap;
        cursor: pointer;
        .co-button {
          color: $tp-co-transaction-tags-edit-button-color;
          background: $tp-co-transaction-tags-edit-button-background-color;
          height: 28px;
          .co-icon {
            width: $tp-co-transaction-tags-edit-button-icon-size;
            height: $tp-co-transaction-tags-edit-button-icon-size;
            svg { // for fontawesome icons
              fill: $tp-co-transaction-tags-edit-button-icon-color;
            }
            & [fill] { // for own icons
              fill: $tp-co-transaction-tags-edit-button-icon-color;
            }
          }
          &:hover {
            filter: brightness(100%);
            background: $tp-co-transaction-tags-edit-button-hover-color;
            .co-icon {
              svg {
                fill: $tp-co-transaction-tags-edit-button-hover-icon-color;
              }
            }
          }
        }
      }
    }
    .co-transaction-tag {
      user-select: none;
      display: flex;
      align-items: center;
      max-height: $tp-co-transaction-tags-height;
      padding: $tp-co-transaction-tags-padding;
      border-style: $tp-co-transaction-tags-border-style;
      border-width: $tp-co-transaction-tags-border-width;
      border-radius: $tp-co-transaction-tags-border-radius;
    }
  }
}
