//
// Copyright IBM Corp. 2019, 2021
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@import 'carbon-components/scss/components/button/button';

:host(#{$prefix}-btn),
:host(#{$prefix}-modal-footer-button) {
  display: inline-flex;
  max-width: rem(320px);
  outline: none;

  .#{$prefix}--btn {
    flex-grow: 1;
    max-width: 100%;
  }

  ::slotted([slot='icon']) {
    fill: currentColor;
    position: absolute;
    right: rem(16px);
    flex-shrink: 0;
  }

  &[isExpressive] ::slotted([slot='icon']) {
    width: rem(20px);
    height: rem(20px);
  }

  &[icon-layout='condensed'] .#{$prefix}--btn {
    padding-right: rem(39px);
  }

  .#{$prefix}--btn--icon-only ::slotted([slot='icon']) {
    position: static;
  }

  &[kind='ghost'],
  &[kind='danger-ghost'] {
    ::slotted([slot='icon']) {
      position: static;
      margin-left: rem(8px);
    }

    &[icon-layout='condensed'] .#{$prefix}--btn {
      padding-right: rem(16px);
    }
  }
}

:host(#{$prefix}-btn[kind='ghost']:hover) .#{$prefix}--btn--ghost,
:host(#{$prefix}-btn[kind='ghost']) .#{$prefix}--btn--ghost:active {
  outline: none;
}