/* AMOS-LAYOUT UTILITY
nb: use only vars in variables.less because this file is imported by other plugin
 */

.cover-object {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.listbox-label(@background-color-label: @brand-primary-color) {
  color: #fff;
  padding: 3px 5px;
  width: fit-content;
  display: table;
  /* fit-content on firefox */
  text-transform: uppercase;
  background-color: @background-color-label;
}

/**
FLEXBOX
 */
.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flexbox-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flexbox-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flexbox-wrap(@flex-wrap-value: wrap) {
  -ms-flex-wrap: @flex-wrap-value;
  flex-wrap: @flex-wrap-value;
}

/**
BOX SHADOW
 */
.boxshadow(@h-offset: 0px, @v-offset: 0px, @blur: 0px, @spread: 0px, @color: @box-shadow-default) {
  -webkit-box-shadow: @h-offset @v-offset @blur @spread @color;
  -moz-box-shadow: @h-offset @v-offset @blur @spread @color;
  box-shadow: @h-offset @v-offset @blur @spread @color;
}

/**
TRANSITION
 */
.transition(@property: all, @duration: 0s, @timing-function: ease, @delay: 0s) {
  -webkit-transition: @property @duration @timing-function @delay;
  -moz-transition: @property @duration @timing-function @delay;
  -o-transition: @property @duration @timing-function @delay;
  -ms-transition: @property @duration @timing-function @delay;
  transition: @property @duration @timing-function @delay;
}

/**
LINEAR GRADIENT
 */
.linear-gradient(@direction: to bottom, @color1: @primary-color, @color1perc: 50%, @color2: @white-color, @color2perc: 50%) {
  background: @color1;
  background: -moz-linear-gradient(@direction, @color1 @color1perc, @color2 @color2perc);
  background: -webkit-linear-gradient(@direction, @color1 @color1perc, @color2 @color2perc);
  background: linear-gradient(@direction, @color1 @color1perc, @color2 @color2perc);
}

.line-clamp (@lines: 3) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}

/**
TODO CHECK POSITION
 */
@box-size: 50px;
@container-img-size: 80px; //image size into list (graphic widget)


// CONTAINER CUSTOM MIXIN -- TODO TO CHECK
.container-custom,
.containerCustomStyle {
  padding-left: @global-padding-mbl;
  padding-right: @global-padding-mbl;

  &::before {
    display: table;
    content: " ";
  }

  &::after {
    display: table;
    content: " ";
    clear: both;
  }

  nav & {
    padding-left: calc(~'@{global-padding-mbl} - 2*@{square-box-margin}');
    padding-right: calc(~'@{global-padding-mbl} - 2*@{square-box-margin}');
  }

  @media screen and (min-width: @tablet) {
    padding-left: @global-padding-tab;
    padding-right: @global-padding-tab;

    nav & {
      padding-left: calc(~'@{global-padding-tab} - 2*@{square-box-margin}');
      padding-right: calc(~'@{global-padding-tab} - 2*@{square-box-margin}');
    }
  }

  @media screen and (min-width: @desktop) {
    padding-left: @global-padding-dsk;
    padding-right: @global-padding-dsk;

    nav & {
      padding-left: calc(~'@{global-padding-dsk} - 2*@{square-box-margin}');
      padding-right: calc(~'@{global-padding-dsk} - 2*@{square-box-margin}');
    }
  }
}

// CONTAINER CUSTOM MIXIN MARGIN-- TODO TO CHECK
.container-custom-margin,
.containerCustomStyleMargin {
  margin-left: @global-margin-mbl;
  margin-right: @global-margin-mbl;

  &::before {
    display: table;
    content: " ";
  }

  &::after {
    display: table;
    content: " ";
    clear: both;
  }

  nav & {
    margin-left: calc(~'@{global-margin-mbl} - 2*@{square-box-margin}');
    margin-right: calc(~'@{global-margin-mbl} - 2*@{square-box-margin}');
  }

  @media screen and (min-width: @tablet) {
    margin-left: @global-margin-tab;
    margin-right: @global-margin-tab;

    nav & {
      margin-left: calc(~'@{global-margin-tab} - 2*@{square-box-margin}');
      margin-right: calc(~'@{global-margin-tab} - 2*@{square-box-margin}');
    }
  }

  @media screen and (min-width: @desktop) {
    margin-left: @global-margin-dsk;
    margin-right: @global-margin-dsk;

    nav & {
      margin-left: calc(~'@{global-margin-dsk} - 2*@{square-box-margin}');
      margin-right: calc(~'@{global-margin-dsk} - 2*@{square-box-margin}');
    }
  }
}


// BOXES STYLE MIXIN
.boxesStyle {
  font-size: 1.2rem;
  line-height: 1.4rem;

  .pluginName,
  .language-item {
    display: block;
    color: @white-color;
  }

  .color-primary {
    background-color: transparent !important; //TODO REMOVE OLD CLASSES
  }

  .ic,
  .am,
  .dash {
    color: @white-color;
    margin-bottom: 7px;
    display: inline-block;

    &:before {
      font-size: 3rem;
    }
  }

  .icon-open-modal:before {
    font-size: 2.1rem;
  }

  .am-2 {
    font-size: unset;
  }

  @media screen and (max-width: @tablet) {

    .icon-open-modal:before {
      font-size: 2.2rem;
    }

    .pluginName,
    .language-item {
      font-size: 1.5rem;
      line-height: 1.6rem;
    }
  }

  @media screen and (min-width: @desktop-large) {

    .ic,
    .am,
    .dash {
      &:before {
        font-size: 4rem;
      }
    }

    .icon-open-modal:before {
      font-size: 2.2rem;
    }

    .pluginName,
    .language-item {
      font-size: 1.20rem;
    }
  }
}

// BOX WIDGET HEADER STYLE MIXIN
.boxWidgetHeaderStyle {
  .box-widget {
    padding: 0;
  }

  .box-widget-header .box-widget-wrapper {
    overflow: hidden;
  }

  @media screen and (max-width: @smartphone-only) {
    .box-widget-header {
      .box-widget-title {
        display: flex;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.35rem;

        .am-2,
        .pluginName,
        .language-item {
          font-size: 1.6rem;
        }

        .pluginName,
        .language-item {
          margin-left: 2%;
          width: 100%;
        }
      }

      .read-all {
        display: none;
      }
    }
  }

  @media screen and (min-width: @tablet) {
    .box-widget {
      padding: 0 @global-padding-tab;
    }

    .box-widget-header {
      width: calc(~'@{global-padding-tab} + (80% / @{square-box-factor-tab} - @{square-box-margin})');
      position: absolute;
      padding-left: @global-padding-tab;

      .box-widget-wrapper {
        position: relative;

        &:before {
          content: "";
          display: block;
          padding-top: 100%;
        }

        .box-widget-title {
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      .read-all {
        position: relative;
        right: 0;
        text-transform: none;
        font-size: 1.1rem;
        line-height: 1.5rem;

        a {
          position: absolute;
          right: 0;
          left: 0;
          text-transform: uppercase;
          font-size: 1.2rem;
        }
      }
    }
  }

  @media screen and (min-width: @desktop) {
    .box-widget {
      padding: 0 @global-padding-dsk;
    }

    .box-widget-header {
      padding-left: @global-padding-dsk;
      width: calc(~'@{global-padding-dsk} + (80% / @{square-box-factor-dsk} - @{square-box-margin})');

      .read-all {
        font-size: 1.3rem;
        line-height: 1.8rem;
      }
    }
  }

  @media screen and (min-width: @desktop-large) {
    .box-widget-header {
      width: calc(~'@{global-padding-dsk} + (80% / @{square-box-factor-dsk-large} - @{square-box-margin})');
    }
  }
}