:host {
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .wrapper-header {
    font-size: 20px;
  }

  .grouping {
    display: flex;
    gap: 5px;

    .group {
      cursor: pointer;
      padding: 0 8px;
      background-color: var(--color-gray-eee);
      border-radius: 10px;

      &.selected {
        color: var(--color-gray-fff);
        background-color: var(--accent-color-bg);
      }
    }
  }

  .gadget-list {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 24px;

    .gadget-item {
      display: flex;
      flex-flow: row nowrap;
      column-gap: 10px;

      .panel-button-column {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .graphics {
          pointer-events: none;

          display: flex;
          align-items: center;
          justify-content: center;

          width: 100%;

          > *,
          > * * {
            pointer-events: none;
          }
        }
      }

      .panel-content-column {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .column-header {
          font-size: 16px;
          font-weight: 600;

          text-box-edge: cap alphabetic;
          text-box-trim: trim-both;
        }

        .column-text {
          color: var(--color-gray-888);
        }
      }
    }
  }
}

app-cmf-icon {
  display: flex;
}