// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

@import '../libSupport/deprecated';
@import '../libSupport/manageScope';

// Wrapper class around the use of ods-hyperlink role=button and ods-button.

// This selector is NOT auto included with any other web core style sheet.

// sass-lint:disable no-mergeable-selectors
/* stylelint-disable selector-type-no-unknown */

/// `.auro_containedButtons` is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink `role="button"` in a parent container.
///
/// `.auro_containedButtons` has a dependency on WCSS breakpoints. See example below to import dependency.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` options.
///
/// Place selector on outer parent element.
/// @group utility-auro
/// @example scss - Default selector(s)
///   .auro_containedButtons {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .auro_containedButtons {}
///
/// @example scss - import selector file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";
/// @example scss - import dependency file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

#{$scope}.auro_containedButtons {
  display: flex;
  flex-direction: column;

  > * {
    margin-bottom: var(--ds-text-body-size-default, $ds-text-body-size-default);

    &:last-child {
      margin-bottom: 0;
    }
  }

  @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
    flex-direction: row;

    > * {
      margin-bottom: 0;
      margin-left: var(--ds-text-body-size-default, $ds-text-body-size-default);

      &:first-child {
        margin-left: 0;
      }
    }
  }
}