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

.ff-plus-icon {
  border-radius: 16px;
  border-style: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  @include mixins.center-content();
  background-color: var(--hover-color);
  gap: 8px;
  padding: 2px 8px 2px 2px;

  .button-icon {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-icon-color);
    border-radius: 12px;
    @include mixins.center-content();
    background-color: var(--secondary-icon-color);
    .ff-icon-color {
      path {
        color: var(--primary-icon-color);
      }
    }
  }

  .icon-name {
    color: var(--secondary-icon-color);
    @include mixins.center-content();
  }
  background-color: var(--hover-color);

  &:not(:disabled):hover {
    background-color: var(--secondary-icon-color);

    .icon-name {
      font-weight: 600;
      color: var(--primary-icon-color);
      @include mixins.center-content();
    }

    .button-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      @include mixins.center-content();
      background-color: var(--hover-color);

      .ff-icon-color {
        path {
          color: var(--secondary-icon-color);
        }
      }
    }
  }
  &:disabled {
    background-color: var(--disable-icon-btn-bg-color);
    .icon-name {
      color: var(--primary-icon-color);
    }
  }
  .icon-name {
    color: var(--secondary-icon-color);
  }
}

.ff-plus-no-icon {
  gap: 0px;
  padding: 4px 8px 4px 8px;
  border-radius: 16px;

  .button-icon {
    display: none;
  }

  .icon-name {
    font-weight: normal;
  }
}

.ff-plus-disabled {
  opacity: 0.2;
  cursor: not-allowed;
}