@use '../../_styles/mixin.scss' as *;

@include respond('<=laptop') {
  .o-message {
    --message-padding: 7px 12px;
    --message-gap: 12px;

    --message-text-size: var(--o-font_size-tip1);
    --message-text-height: var(--o-line_height-tip1);

    --message-icon-size: var(--o-icon_size_control-s);
  }

  .o-messgage-both {
    --message-text-size: var(--o-font_size-tip2);
    --message-text-height: var(--o-line_height-tip2);

    --message-padding: 5px 12px 8px;
  }

  .o-message-only-title {
    --message-padding: 5px 12px;
  }

  .o-message-only-content {
    --message-text-size: var(--o-font_size-tip2);
    --message-text-height: var(--o-line_height-tip2);

    --message-padding: 6px 12px;
  }
}

@include respond('<=pad') {
  .o-message {
    --message-gap: 8px;
  }
}

@include respond('<=pad_v') {
  .o-messgage-both {
    --message-title-size: var(--o-font_size-tip2);
    --message-title-height: var(--o-line_height-tip2);

    --message-icon-size: var(--o-icon_size_control-xs);

    --message-padding: 4px 12px;
    --message-title-gap: 4px;
  }

  .o-message-colorful {
    --message-sidebar-width: 3px;
  }

  .o-message-only-title {
    --message-title-size: var(--o-font_size-tip2);
    --message-title-height: var(--o-line_height-tip2);

    --message-icon-size: var(--o-icon_size_control-xs);

    --message-padding: 4px 12px;
  }

  .o-message-only-content {
    --message-icon-size: var(--o-icon_size_control-xs);

    --message-padding: 4px 12px;
  }
}