.lbaic-settings-button {
  position: relative;
  max-width: 100%;
  height: var(--lbaic-settings-button-height);
  display: flex;
  margin-block-end: var(--lbaic-settings-button-mbe);
  padding-block: var(--lbaic-settings-button-pb, unset);
  padding-inline-start: var(--lbaic-settings-button-pi-start);
  padding-inline-end: var(--lbaic-settings-button-pi-end);
  background-color: var(--lbaic-settings-button-bg);
  border: var(--lbaic-settings-button-border);
  border-radius: var(--lbaic-settings-button-border-radius);
  font-size: var(--lbaic-settings-button-fs);
  font-weight: var(--lbaic-settings-button-fw);
  color: var(--lbaic-settings-button-color);
  line-height: var(--lbaic-settings-button-lh);
  transition: background-color 180ms ease-in-out, opacity 180ms ease-in-out;
  overflow: hidden;
  cursor: pointer;

  &-in {
    display: flex;
    align-items: center;
  }

  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: opacity 180ms ease-in-out;
    z-index: 1;
  }

  &:before {
    background-color: rgba(var(--lbaic-settings-white-rgb), 0.2);
    opacity: var(--lbaic-settings-button-hover-opacity, 0);
  }

  &:after {
    background-color: rgba(var(--lbaic-settings-black-rgb), 0.2);
    opacity: var(--lbaic-settings-button-active-opacity, 0);
  }

  &:hover {
    --lbaic-settings-button-hover-opacity: 1;
  }

  &:active {
    --lbaic-settings-button-active-opacity: 1;
  }

  &-left {
    justify-content: flex-start;
    align-items: center;
  }

  &-center {
    justify-content: center;
    align-items: center;
  }

  &-h-28 {
    --lbaic-settings-button-height: 28px;
  }

  &-h-30 {
    --lbaic-settings-button-height: 30px;
  }

  &-h-32 {
    --lbaic-settings-button-height: 32px;
  }

  &-h-34 {
    --lbaic-settings-button-height: 34px;
  }

  &-h-40 {
    --lbaic-settings-button-height: 40px;
  }

  &-label {
    position: relative;
    max-width: 100%;
    padding-inline-start: var(--lbaic-settings-button-label-pi-start);
    padding-inline-end: var(--lbaic-settings-button-label-pi-end);
    display: block;
    line-height: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    z-index: 2;

    &-i {
      position: relative;
      width: var(--lbaic-settings-button-label-i-width);
      height: auto;
      display: block;
      fill: var(--lbaic-settings-button-i-fill, currentColor);
      z-index: 2;
    }
  }

  &-i {
    position: relative;
    width: var(--lbaic-settings-button-i-width);
    height: auto;
    display: block;
    fill: var(--lbaic-settings-button-i-fill, currentColor);
    z-index: 2;
  }

  &-primary {
    --lbaic-settings-button-pi-start: 10px;
    --lbaic-settings-button-pi-end: 10px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-primary-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-primary-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-primary-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-i-width: 16px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);
  }

  &-secondary {
    --lbaic-settings-button-pi-start: 10px;
    --lbaic-settings-button-pi-end: 10px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-secondary-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-secondary-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-secondary-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-i-width: 16px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);
  }

  &-secondary-colored {
    --lbaic-settings-button-pi-start: 10px;
    --lbaic-settings-button-pi-end: 10px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-secondary-colored-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-secondary-colored-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-secondary-colored-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-i-width: 16px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);
  }

  &-danger {
    --lbaic-settings-button-pi-start: 10px;
    --lbaic-settings-button-pi-end: 10px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-danger-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-danger-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-danger-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-i-width: 16px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);
  }

  &-tertiary {
    --lbaic-settings-button-pi-start: 16px;
    --lbaic-settings-button-pi-end: 16px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-tertiary-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-tertiary-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-tertiary-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-button-i-width: 16px;
  }

  &-insert {
    --lbaic-settings-button-pi-start: 16px;
    --lbaic-settings-button-pi-end: 16px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-insert-bg);
    --lbaic-settings-button-border-radius: 4px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-insert-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
  }

  &-minimal {
    --lbaic-settings-button-pi-start: 16px;
    --lbaic-settings-button-pi-end: 16px;
    --lbaic-settings-button-bg: var(--lbaic-settings-button-minimal-bg);
    --lbaic-settings-button-border: 1px solid var(--lbaic-settings-button-minimal-border);
    --lbaic-settings-button-border-radius: 6px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-14);
    --lbaic-settings-button-fw: var(--lbaic-settings-fw-500);
    --lbaic-settings-button-color: var(--lbaic-settings-button-minimal-color);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-20);
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-button-i-width: 16px;
  }

  &-copilot {
    --lbaic-settings-button-height: 28px;
    --lbaic-settings-button-pb: 5.250px;
    --lbaic-settings-button-pi-start: 7px;
    --lbaic-settings-button-pi-end: 7px;
    --lbaic-settings-button-border-radius: 8.75px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-12);
    --lbaic-settings-button-color: rgba(var(--lbaic-settings-copilot-menu-item-color), 1);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-18);
    --lbaic-settings-button-i-width: 12px;
    --lbaic-settings-button-label-i-width: 14px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);
    justify-content: space-between;
    align-items: center;

    &:hover {
      --lbaic-settings-button-bg: rgba(var(--lbaic-settings-copilot-menu-item-hover-color), 0.14);
      --lbaic-settings-button-hover-opacity: 0;

      border-bottom: 0;
    }

    &:active, &.active {
      --lbaic-settings-button-bg: rgba(var(--lbaic-settings-copilot-menu-item-active-color), 0.25);
      --lbaic-settings-button-active-opacity: 0;

      border-bottom: 0;
    }

    .lbaic-settings-button-label {
      &:not(:first-child):not(:last-child) {
        padding-inline-start: var(--lbaic-settings-button-label-pi-start);
      }
    }

    .lbaic-settings-button-i {
      stroke: var(--lbaic-settings-button-i-fill, currentColor);
    }

    &.delete {
      --lbaic-settings-button-color: var(--lbaic-settings-copilot-delete-action-color);
    }
  }

  &-kebab-menu {
    --lbaic-settings-button-height: 28px;
    --lbaic-settings-button-pb: 5.250px;
    --lbaic-settings-button-pi-start: 7px;
    --lbaic-settings-button-pi-end: 7px;
    --lbaic-settings-button-border-radius: 8.75px;
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-12);
    --lbaic-settings-button-color: rgba(var(--lbaic-settings-kebab-menu-item-color), 1);
    --lbaic-settings-button-lh: var(--lbaic-settings-lh-18);
    --lbaic-settings-button-i-width: 14px;
    --lbaic-settings-button-label-pi-start: 6px;
    --lbaic-settings-button-label-pi-end: 6px;
    --lbaic-settings-loading-circle-width: var(--lbaic-settings-button-i-width);
    --lbaic-settings-loading-circle-width-stroke: var(--lbaic-settings-button-i-fill);

    &:hover {
      --lbaic-settings-button-bg: rgba(var(--lbaic-settings-kebab-menu-item-hover-color), 0.14);
      --lbaic-settings-button-hover-opacity: 0;
    }

    &:active, &.active {
      --lbaic-settings-button-bg: rgba(var(--lbaic-settings-kebab-menu-item-active-color), 0.25);
      --lbaic-settings-button-active-opacity: 0;
    }

    .lbaic-settings-button-label {
      &:not(:first-child):not(:last-child) {
        padding-inline-start: var(--lbaic-settings-button-label-pi-start);
      }
    }

    &.delete {
      --lbaic-settings-button-color: var(--lbaic-settings-kebab-delete-action-color);
    }
  }

  &-reset {
    padding-block: 0;
    padding-inline: 0;
    background-color: transparent;
    border: none;
    text-align: left;
    cursor: pointer;

    &:focus {
      box-shadow: none;
    }
  }

  &-save-process {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    &-i {
      position: absolute;
      width: 12px;
    }
  }

  &-process {
    &-progress {
      margin-inline-start: 6px;
      font-size: var(--lbaic-settings-button-process-font-size, 10px);
    }
  }

  &-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &-collect {
    --lbaic-settings-button-color: var(--lbaic-settings-primary);
  }
}