@use "variables.scss";
.action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;

  .ann-nav-btns {
    display: flex;
    flex-direction: column;
    color: variables.$grey-blue;
    font-size: 14px;
    text-align: center;
    padding-right: 8px;

    .button-icon {
      width: 12px !important;
      height: 12px !important;
      &.is-link {
        cursor: pointer !important;
      }
    }
  }

  .button-action {
    padding: 0px;
    vertical-align: middle;

    &.is-button-icon {
      width: 20px;
      height: 20px;
    }

    &.is-button-text {
      height: 26px;
      padding: 6px;
      font-size: 14px;
      font-weight: 500;
    }

    &.is-button-text-ghost {
      height: 26px;
      color: variables.$grey-blue;
      font-size: 14px;
      font-weight: 500;

      &:hover {
        text-decoration: none;
        color: variables.$text-color;
      }

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

    .button-icon {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      &.cancel-icon {
        width: 16px;
        height: 16px;
      }
      &.angle-icon {
        width: 12px;
        height: 12px;
      }
    }

    .button-text {
      display: block;
    }
  }

  .accept-icon,
  .restore-icon,
  .accept-all-icon {
    color: variables.$green !important;
  }
  .save-icon {
    color: variables.$primary;
  }
  .decline-icon {
    color: variables.$red;
  }
  .cancel-icon,
  .search-icon,
  .missing-icon,
  .link-icon,
  .angle-icon,
  .spinner-icon {
    color: variables.$grey-blue;
  }

  .spinner-icon {
    width: 16px;
  }

  .missing-button-container {
    background-color: transparent;
    display: flex;
    flex-direction: row;
  }
}