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

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../lightbox-media-viewer';
@use '../button';

@mixin button-group {
  :host(#{$c4d-prefix}-button-group-item),
  :host(#{$c4d-prefix}-button-cta) {
    @extend :host(#{$c4d-prefix}-button);

    max-inline-size: 100%;

    min-inline-size: 0;

    outline: none;

    @media print {
      display: block;
      margin-block-end: $spacing-05;
      max-inline-size: 100%;
    }

    .#{$prefix}--btn {
      inline-size: 100%;
      max-inline-size: 100%;
      transition: all $duration-fast-01 motion(entrance, productive), width 0s,
        height 0s;
      word-break: break-word;

      @media print {
        display: block;
        border: to-rem(1px) solid $gray-100;
        background: $white-0;
        color: $gray-100;
        font-weight: 600;
        max-inline-size: inherit;
      }

      .#{$prefix}--btn__icon {
        block-size: auto;
        inline-size: auto;
      }

      .#{$prefix}--btn--hidden {
        display: none;
        visibility: hidden;

        @media print {
          display: inline-block;
          color: $gray-100;
          font-weight: 200;
          visibility: visible;

          span {
            font-weight: 600;
            margin-inline: calc(-1 * #{$spacing-02}) $spacing-02;
          }
        }
      }
    }

    .#{$prefix}--btn--multiline {
      align-items: start;
    }
  }

  :host(#{$c4d-prefix}-button-group),
  :host(#{$c4d-prefix}-leadspace-block-cta) {
    --#{$c4d-prefix}--button-group--item-count: 3;

    display: grid;
    grid-auto-rows: 1fr;
    grid-gap: $spacing-05;
    grid-template-columns: 1fr;

    @include breakpoint(md) {
      display: inline-grid;
      grid-template-columns: repeat(
        var(--#{$c4d-prefix}--button-group--item-count),
        1fr
      );
    }

    @media print {
      display: block;
    }
  }

  :host(#{$c4d-prefix}-button-group-item) {
    ::slotted([slot='icon']) {
      @extend .#{$prefix}--btn__icon;

      @media print {
        fill: $gray-100;
      }
    }

    display: flex;
    inline-size: 100%;
  }
}