@use '../../assets/styles/mixins' as mixins;

.plus-icon-style {
  border-radius: 16px;
  border-style: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  @include mixins.center-content();
  gap: 8px;
  background-color: var(--status-button-bg-running);
  padding: 2px 8px 2px 2px;
  .button-icon-style {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-icon-color);
    border-radius: 50%;
    @include mixins.center-content();
    background-color: var(--secondary-icon-color);
    .icon-color-style {
      path {
        color: var(--primary-icon-color);
      }
    }
  }
  .icon-name-style {
    color: var(--secondary-icon-color);
    @include mixins.center-content();
  }
  &:hover {
    border: 1px solid var(--icon-button-border-color);
    .icon-name-style {
      font-weight: 600;
      color: var(--secondary-icon-color);
      @include mixins.center-content();
    }
    .button-icon-style {
      width: 20px;
      height: 20px;
      border: 1px solid var(--hover-color);
      border-radius: 50%;
      @include mixins.center-content();
      .icon-color-style {
        path {
          color: var(--primary-icon-color);
        }
      }
    }
  }

  &.is-disabled,
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border: 1px solid var(--secondary-icon-color);
  }
}