.component-list-container {
  align-items: flex-end;
  display: flex;

  .component-list {
    flex: 1;

    .component-list-component {
      display: flex;
      padding: 5px;
      transition: background-color 0.3s linear;

      &.hoverable:hover {
        background-color: @component-list-field-hover;

        .component-remove {
          opacity: 1;

          ux-icon {
            cursor: pointer;
          }

          &[disabled] {
            opacity: 0.5;

            ux-icon {
              cursor: pointer;
            }
          }
        }
      }

      .component-content {
        display: flex;
        flex: 1;

        *:focus ~ .component-remove {
          opacity: 1;
        }
      }

      .component-remove {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: none;
        opacity: 0;
        transition: opacity 0.3s linear;
        width: 32px;
        border: none;
        background: none;

        &.ux-focus-indicator-active {
          opacity: 1;
        }

        ux-icon {
          color: @component-list-remove-color;
        }
      }
    }
  }

  .component-actions {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: none;
    margin-bottom: 7px;
    margin-left: 48px;
    border: none;
    background-color: transparent;
    padding: 0;

    .component-add-btn {
      align-items: center;
      background-color: @component-list-add-bg;
      opacity: @component-list-add-bg-opacity;
      border-radius: 50%;
      color: @component-list-add-icon-color;
      display: inline-flex;
      height: 30px;
      justify-content: center;
      transition: background-color 0.3s linear;
      width: 30px;
      border: none;
    }

    &:hover {
      .component-add-btn {
        background-color: @component-list-add-hover-bg;
        opacity: @component-list-add-hover-bg-opacity;
      }
    }

    &.ux-focus-indicator-active {
      .component-add-btn {
        background-color: @component-list-add-hover-bg;
        opacity: @component-list-add-hover-bg-opacity;
      }
    }

    .component-add-text {
      color: @component-list-add-color;
      margin-bottom: 0;
      padding-left: 8px;
    }

    &[disabled],
    &.disabled {
      cursor: default;
      opacity: 0.5;
      outline: none;

      &:hover {
        .component-add-btn {
          background-color: @component-list-add-bg;
          opacity: 0.5;
        }
      }
    }
  }
}