.actions {
  display: flex;
  justify-content: center;
  gap: $spacer-3;

  &--end {
    justify-content: flex-end;
  }

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

  &--start {
    justify-content: flex-start;
  }

  &--column {
    flex-direction: column;
  }

  &--row {
    flex-direction: row;
  }

  .action,
  .link {
    position: relative;

    &.primary {
      background-color: $primary-color;

      &:hover {
        background-color: color-mix(in srgb, #{$primary-color}, #000000 10%);
      }

      &--outlined {
        background-color: white;
        border: 1px solid $primary-color;
        color: $primary-color;

        &:hover {
          background-color: white;
        }
      }
    }

    &.secondary {
      background-color: $secondary-color;

      &:hover {
        background-color: color-mix(in srgb, #{$secondary-color}, #000000 10%);
      }

      &--outlined {
        background-color: white;
        border: 1px solid $secondary-color;
        color: $secondary-color;

        &:hover {
          background-color: white;
        }
      }
    }

    &.danger {
      background-color: $red-danger;

      &:hover {
        background-color: color-mix(in srgb, #{$red-danger}, #000000 10%);
      }

      &--outlined {
        background-color: white;
        border: 1px solid $red-danger;
        color: $red-danger;

        &:hover {
          background-color: white;
        }
      }
    }

    &:disabled {
      background-color: $gray-lighter;
      color: transparent;
    }

    .loading-progress {
      position: absolute;
      display: none;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .circle-progress {
        width: 20px !important; /* stylelint-disable-line declaration-no-important */
        height: 20px !important; /* stylelint-disable-line declaration-no-important */
        color: $gray-dark;
      }
    }

    &--loading {
      .loading-progress {
        display: flex;
      }
    }
  }
}