@import '../../vendor/carbon-components/scss/components/button/button';
@import '../../globals/vars';

.#{$iot-prefix}--btn {
  justify-content: flex-start;

  .#{$prefix}--loading {
    margin-top: -$spacing-05;
    margin-bottom: -$spacing-05;
    margin-right: $spacing-03;
  }
  .#{$prefix}--loading__stroke {
    stroke: $carbon--gray-50;
  }
}

.#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only:not(.#{$iot-prefix}--btn-icon-selection--selected).#{$iot-prefix}--btn-icon-selection--recommended {
  border: 1px solid $support-02;
}

.#{$iot-prefix}--btn:not(.#{$iot-prefix}--btn-icon-selection--selected)
  .#{$iot-prefix}--btn-icon-selection--recommended_marker {
  position: absolute;
  top: 0;
  right: 0;
  border-width: $spacing-04 0 0 $spacing-04;
  border-style: solid;
  border-color: $support-02 transparent;
}

.#{$iot-prefix}--btn.#{$prefix}--btn--field:not(.#{$iot-prefix}--btn-icon-selection--selected)
  .#{$iot-prefix}--btn-icon-selection--recommended_marker {
  border-width: $spacing-03 0 0 $spacing-03;
}

.#{$iot-prefix}--btn.#{$prefix}--btn--sm:not(.#{$iot-prefix}--btn-icon-selection--selected)
  .#{$iot-prefix}--btn-icon-selection--recommended_marker {
  border-width: $spacing-02 0 0 $spacing-02;
}

.#{$iot-prefix}--btn-icon-selection--selected {
  border-color: $focus;
}

.#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only.#{$iot-prefix}--btn-icon-selection
  svg
  path {
  fill: $icon-01;
  outline-color: transparent;
}

.#{$iot-prefix}--btn.#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only.#{$iot-prefix}--btn-icon-selection.#{$iot-prefix}--btn-icon-selection--selected
  svg
  path {
  fill: $interactive-01;
  outline-color: transparent;
}

[dir='rtl'] {
  .#{$iot-prefix}--btn:not(.#{$prefix}--btn--icon-only) {
    text-align: right;
    padding-left: 60px; // fixed values to invert $button-padding of Carbon's theme-tokens.scss
    padding-right: 12px;
  }

  .#{$prefix}--btn .#{$prefix}--btn__icon {
    left: $spacing-05;
    right: initial;
  }
}