@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {

  .form--image-select {
    margin-bottom: 5rem;

    &:not(.widget) {
      margin-top: rfs-value(75px);

      .ce--headline {
        border-bottom: 1px solid var(--bs-gray-400);
      }
    }

    .ce--headline {
      //font-size: 3rem;
      //margin-bottom: 3.5rem;

      h1,
      .h1,
      h2,
      .h2 {
        font-size: 2.25rem;
      }

      h3,
      .h3 {
        color: var(--bs-body-color);
        border: 0px;
        margin-bottom: 2rem;
        margin-top: 4rem;
        font-size: 2rem;
        font-weight: $font-weight-bold;
        text-align: center;
      }

      .ce--subline {
        font-size: 1.25rem;
      }
    }

    .image-select--item {
      min-height: 100%;
      display: flex;
      flex-flow: column wrap;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      margin-bottom: 2rem;
      padding-bottom: 2.5rem;

      .item--headline {
        text-align: center;

        h3 {
          position: relative;
          padding-bottom: 1rem;
          color: var(--bs-body-color);
          @include font-size(28px);
          font-weight: $font-weight-bold;
          margin-bottom: 1rem;

          &:after {
            content: "";
            height: 5px;
            width: 90px;
            left: 50%;
            margin-left: -45px;
            display: inline-block;
            position: absolute;
            bottom: 0;
            background-color: var(--bs-primary);
          }
        }
      }

      .item--text-top {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .item--image {
        margin: 1.5rem 0;
      }

      .item--text-bottom {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-bottom: 1rem;
      }

      .item--input {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        .form-check {
          font-size: 1.5rem;
          font-weight: $font-weight-bold;
        }
      }

      .item--preview-links {
        margin-top: 0.5rem;
        text-align: center;
        @include font-size(14px);
      }

      ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;

        li {
          a {
            text-decoration: none;
            font-weight: $font-weight-bold;
            display: block;
          }
        }
      }
    }

    .col-right {
      @include media-breakpoint-up(xl) {
        padding-left: 5rem;
        max-width: rfs-value(550px);
        margin: 0 0 0 auto;
      }

      h3 {
        font-weight: $font-weight-bold;
      }
    }
  }

}