@mixin btn-focus {
  &:focus-visible {
    position: relative;
    outline: none;

    &::after {
      content: "";
      position: absolute;
      inset: -1px;
      border: 2px solid var(--border-color-focus);
      border-radius: 6px;
      z-index: 2;
    }
  }
}

.pl-btn-split {
  $root: &;

  --border-color: var(--border-color-default);

  height: 40px;
  min-width: 160px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  cursor: pointer;

  &.disabled,
  &.loading {
    pointer-events: none;
    --border-color: var(--border-color-div-grey);
  }

  &.loading {
    .mask-loading {
      animation: spin 2.5s linear infinite;
    }
  }

  &__title {
    padding: 8px 14px;
    height: 100%;
    color: var(--border-color);
    transition: all 0.1s ease-in-out;
    @include btn-focus;

    &:hover {
      border-radius: 6px;
      background-color: var(--btn-sec-hover-grey);
    }

    &:active {
      border-radius: 6px;
      background-color: var(--btn-sec-press-grey);
    }
  }

  &__icon,
  .mask-loading {
    --icon-color: var(--border-color);
  }

  &__icon-container {
    width: 36px;
    height: 100%;
    position: relative;
    transition: all 0.1s ease-in-out;
    @include btn-focus;

    &:hover {
      border-radius: 6px;
      background-color: var(--btn-sec-hover-grey);
    }

    &:active {
      border-radius: 6px;
      background-color: var(--btn-sec-press-grey);
    }

    &::before {
      content: "";
      background: var(--border-color);
      height: 26px;
      position: absolute;
      left: 0;
      width: 1px;
    }
  }
}