@import 'colors';
@import 'constants';

$procedure-context-breakpoint: $two-columns-breakpoint;

.procedure-preview {
  .simple {
    margin-bottom: 0.2rem;
    font-size: 1.5rem;
    color: $blue-france-500;
    font-weight: bold;
  }

  .small-simple {
    font-size: 16px;
    color: $blue-france-500;
    font-weight: bold;
  }

  .close-procedure {
    font-size: 12px;
  }

  .procedure-logos {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    > :not(:last-child) {
      margin-right: $default-padding;
    }

    img {
      max-width: 100%;
      max-height: 50px;

      html[data-fr-theme='dark'] & {
        box-sizing: content-box;
        padding: $default-padding / 2;
        background: #ffffff;
      }

      @media (min-width: $procedure-context-breakpoint) {
        max-height: 90px;
      }
    }
  }
}

.procedure-context-content {
  @media (max-width: $procedure-context-breakpoint) {
    input[type='submit'] {
      margin-bottom: 2 * $default-padding;
    }
  }
}