/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiCallOut {
  padding: $ouiSize;
  border-left: calc($ouiSizeXS / 2) solid transparent;
  position: relative;

  &.ouiCallOut--small {
    padding: $ouiSizeS;
  }

  .ouiCallOutHeader__icon {
    flex: 0 0 auto;
    // Vertically center icon with first line of title
    transform: translateY(2px);
  }

  .ouiCallOutHeader__title {
    @include ouiCallOutTitle;
    margin-bottom: 0; // In case it's nested inside OuiText
  }

  .ouiCallOut__closeIcon {
    position: absolute;
    right: calc($ouiSizeS / 2);
    top: 0;
  }
}

// smaller font size for headers in small callout
.ouiCallOut--small .ouiCallOutHeader__title {
  @include ouiCallOutTitle('s');
}

// Create callout modifiers based upon the map.
@each $name, $color in $ouiCallOutTypes {
  .ouiCallOut--#{$name} {
    border-color: $color;
    background-color: ouiCallOutColor($name, 'background');

    .ouiCallOutHeader__icon {
      fill: ouiCallOutColor($name, 'foreground');
    }

    .ouiCallOutHeader__title {
      color: ouiCallOutColor($name, 'foreground');
    }

    .ouiCallOut__closeIcon {
      fill: ouiCallOutColor($name, 'foreground');
    }
  }
}

/**
 * 1. Align icon with first line of title text if it wraps.
 * 2. If content exists under the header, space it appropriately.
 * 3. Apply margin to all but last item in the flex.
 */
.ouiCallOutHeader {
  display: flex;
  align-items: baseline; /* 1 */

  + * {
    margin-top: $ouiSizeS; /* 1 */
  }

  > * + * {
    margin-left: $ouiSizeS; /* 3 */
  }
}