@import 'src/styles/variables';

.recommendations_card {
  position: relative;
  display: inline-block;
  min-height: 100px;
  max-height: 100px;
  width: 220px;
  margin: 0 var(--space-xxl) var(--space-l) 0;
  padding: var(--space-m) var(--space-l);

  text-align: left;
  vertical-align: top;
  box-sizing: border-box;
  white-space: normal;
  text-decoration: none;
  page-break-inside: avoid;
  break-inside: avoid;

  border: 1px solid var(--color-border);
  border-left-width: var(--space-s);
  border-radius: var(--border-radius-m);

  &_for_print {
    display: block;
    max-height: none;
    width: 100%;
    margin: 0 0 var(--space-l) 0;
  }

  &_title {
    font-weight: bold;
    font-size: var(--font-xs);

    display: block;
    width: 90%;
    padding: 0;
    margin: 0 0 var(--space-xs);

    text-align: left;
    text-decoration: none;
    vertical-align: bottom;
  }

  &_icon {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    z-index: 0;

    display: inline-block;
    width: 24px;
    height: 24px;

    opacity: 0.5;
  }

  &_button {
    position: absolute;
    bottom: var(--space-xs);
    right: var(--space-s);
  }

  &_info {
    --color-temp-border: #97C2A9;
    --color-temp-bg: #E3F8EC;
    --color-temp-title: #58866B;
  }

  &_fact {
    --color-temp-border: var(--color-11);
    --color-temp-bg: #EFF7FF;
    --color-temp-title: var(--color-first);
  }

  &_warning {
    --color-temp-border: var(--color-21);
    --color-temp-bg: #FFF5F2;
    --color-temp-title: #E8B06D;
  }

  &_error {
    --color-temp-border: var(--color-12);
    --color-temp-bg: #FFEFEE;
    --color-temp-title: #DD8B87;
  }

  &_title {
    color: var(--color-temp-title);
  }

  &_icon {
    background-image: var(--color-temp-icon);
  }

  &_button {
    color: var(--color-temp-title);
    background-color: var(--color-temp-bg);

    &:hover {
      background-color: var(--color-temp-bg);
    }
  }

  background-color: var(--color-temp-bg);
  border-left-color: var(--color-temp-border);

  &_banner {
    font-size: var(--font-m);
    padding: 0;
    line-height: 100px;
    border-left-width: 1px;
    border-left-color: var(--color-border);
  }
}

