@import "../page-editoriale";
.widget{
  &-slider{
    &-item{.border-radius(2px); .box-shadow(0 2px 5px #999);width: 100%;
      .page-editoriale-form(true);
      .bg{line-height: initial; width: 100%; display: grid; height: 100%; grid-template-rows: auto 1fr;
        .chapo + form{margin-top: 0.8em}
        .title{font-family: 'noto_serifregular'; font-weight: bold;
          & > span.title-picto{display: none}
        }
        .form{align-self: center}
      }
      &-icon{display: block; z-index: 3;
        &.metier{width: 36px; height: 36px; line-height: 1; margin: 0 auto 20px; position: relative;
          path, circle, ellipse, image, line, polygon, polyline, rect, text, use{fill: @white;}
        }
        &.editoriale{position: absolute; bottom: 20px; left: 15px;}
        &.article{width: 36px; height: 36px; background-color: @brand-primary; .border-radius(100%); line-height: 36px; text-align: center}
      }
      &-form{background: @white;
        &-text{display: flex; width: 100%; height: 100%}
        .chapo{font-size: 14px}
      }
      &-link{
        &-global{text-indent: -9999px; position: absolute; top: 0; width: 100%; height: 100%; display: block; z-index: 3; left: 0;}
      }
    }
    &-default{position: relative; background: @white;
      &-graphic{
        .editorial &{position: relative; height: 200px; overflow: hidden}
      }
      &-video{height: 200px; width: auto}
      &-img{position: relative; top: 0; left: 50%; .translate(-50%;0);
        .owl-carousel .owl-item &{width: initial}
      }
      &-text{align-self: center}
      &.publication{
        figure{background-color: lighten(@greyde, 4.8%);padding-top: 10px;
          @media(min-width: @screen-sm){height: 200px; align-items: flex-end; display: grid; overflow: hidden; width: 100%;}
          img{display: flex; max-height: 200px; width: auto;}
        }
      }
      &.editorial{display: grid; grid-template-rows: 200px 1fr;
        .infos{line-height: @line-height-base; vertical-align: middle; display: inline-block;}
        &:hover, &:focus{
          h3{color: @link-hover-color;}
        }
      }
      &-text{z-index: 2; position: relative; text-align: center;
        .infos{
          .editorial &{padding: 20px 15px;}
          p, h3{
            @media(min-width: @screen-sm){color: @black33;}
            .commercial &{color: @white}
          }
          h3{font-weight: bold; font-size: @font-size-base; margin: 0;
            & + p{margin-top: 15px}
          }
          p{font-size: 0.85em;
            &:last-child{margin-bottom: 0}
          }
        }
      }
      .widget-cards-height{position: relative; background: @white;}
      &.commercial{align-items: center; display: flex; flex-direction: column; justify-content: center; padding: 20px 15px; overflow: hidden;
        .bg{background-color: fade(@brand-primary-hover,85%); content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2}
        picture, figure{position: absolute; top: 0; left: 0; height: 100%; z-index: 1; width: 100%; overflow: hidden; margin: 0;
          img{min-width: 100%; max-width: inherit; min-height: 100%}
        }
        &:hover, &:focus{
          .btn-revert{
            .page &{
              &, &:hover, &:focus{background-color: @white; color: @brand-primary; border-color: @white;
                &.link-color{color: inherit!important;}
              }
            }
          }
        }
        .btn-revert{position: relative; z-index: 3; border-color: @white; margin-top: 20px;
          .page &{color: @white;
            &.link-color{color: @white!important;}
          }
        }
      }
    }
    &-content{
      & > div{display: flex; width: 100%}
    }
  }
}