/** @component coachmark */

@import '../../typography/settings';
@import '../select/settings';
@import '../button/mixins';
@import '../../tools/mixins/border-radius';
@import '../../tools/mixins/flex';

@include exports('cui-coachmark') {
  .cui-coachmark {
    &.#{$prefix}-event-overlay {
      &--top {
        > .#{$prefix}-event-overlay__arrow {
          border-top-color: $cui-yellow-70;
        }
      }

      &--left {
        > .#{$prefix}-event-overlay__arrow {
          border-left-color: $cui-yellow-70;
        }
      }

      &--right {
        > .#{$prefix}-event-overlay__arrow {
          border-right-color: $cui-yellow-70;
        }
      }

      &--bottom {
        > .#{$prefix}-event-overlay__arrow {
          border-bottom-color: $cui-yellow-70;
        }
      }

      > .#{$prefix}-event-overlay__children {
        color: white;
        background-color: $cui-yellow-70;
        border: none;
        box-shadow: $select--children__box-shadow;

        > [class$='__container'] {
          @include flex($fd: column, $fw: wrap);

          width: 100%;
          padding: (rem-calc(24) rem-calc(16) rem-calc(19) rem-calc(16));

          > [class$='__header'] {
            margin-bottom: rem-calc(15);
            font-family: $brand-font-bold;
            font-size: rem-calc(14);
            font-weight: bold;
            line-height: rem-calc(22);
            color: $cui-white-100;
            text-align: center;
          }

          > [class$='__subheader'] {
            margin-bottom: rem-calc(15);
            font-size: rem-calc(14);
            line-height: rem-calc(22);
            color: $cui-white-100;
            text-align: center;
          }

          > .#{$button__class} {
            @include button-color($color: $cui-white-100);

            .#{$dark-class} & {
              @include button-color($color: $cui-white-100);
            }
          }
        }
      }
    }
  }
}