@import '../style/mixins/libs/line.scss';
@import '../styles/theme.scss';

.rm-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  &-icon {
    margin: 0px #{$spacingUnit}px;
  }

  &-content {
    line-height: 36px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    flex: 1;
    @include line(1);
    white-space: unset;

    .subheading,
    .body2,
    .caption {
      display: inline;
      padding-right: #{$spacingUnit * 2}px;
    }

    .subheading {
      font-size: #{0.875 * $typographyFontSize}px;
      font-weight: $typographyFontWeightMedium;
    }

    .caption {
      font-size: #{0.75 * $typographyFontSize}px;
      font-weight: $typographyFontWeightLight;
    }
  }

  &.colorPrimary,
  &.colorSecondary,
  &.colorError,
  &.colorSuccess,
  &.colorWarning,
  &.colorProgress {
    .caption {
      color: $paletteTextSecondary2;
    }
  }

  &.colorDefault {
    .caption {
      color: $paletteTextSecondary;
    }
  }

  &.colorAction {
    .caption {
      color: $paletteTextHint;
    }
  }

  &.colorDisabled {
    .caption {
      color: $paletteActionSelected;
    }
  }

  &.colorInherit {
    .caption {
      color: inherit;
    }
  }
}