Ontica/Empiria.Land.Intranet

/**
 * @license
 * Copyright (c) La Vía Óntica SC, Ontica LLC and contributors. All rights reserved.
 *
 * See LICENSE.txt in the project root for complete license information.
 */

@import 'mixins';

//
// Responsive classes
//

.sm-show {
  display: none;

  @include small() {
    display: block;
  }
}


.md-show {
  display: none;

  @include medium() {
    display: block;
  }
}


.sm-hide {
  @include small() {
    display: none;
  }
}


.md-hide {
  @include medium() {
    display: none;
  }
}


.std-hide {
  @include standard() {
    display: none;
  }
}


.sm-fx-column-container {
  @include small() {
    @include column;
    flex: 0;
  }
}


.fx-row-container,
.fx-row-container-fill,
.fx-column-container,
.fx-column-container-fill {

  .sm-fx-item-none {
    @include small() {
      flex: 0 0 auto;
    }
  }

  .sm-fx-item {
    @include small() {
      flex: 1 1 100%;
      max-height: 100%;
      max-width: 100%;
    }
  }

  .sm-fx-gap-half {
    @include small() {
      gap: 0.5rem;
    }
  }

  .sm-fx-gap-three-quarter {
    @include small() {
      gap: 0.75rem;
    }
  }

  .sm-fx-gap {
    @include small() {
      gap: 1rem;
    }
  }

  .sm-fx-gap-none {
    @include small() {
      gap: 0;
    }
  }

}


.fx-row-container {
  .sm-fx-item-half {
    @include small() {
      flex: 1 1 50%;
      max-width: 50%;
    }
  }

  .sm-fx-item-size {
    @include small() {
      flex: 1 1 var(--sm-size);
      max-width: var(--sm-size);
    }
  }
}

.fx-row-container-fill {
  .sm-fx-item-half {
    @include small() {
      flex: 1 1 50%;
      max-width: 50%;
      max-height: 100%;
    }
  }

  .sm-fx-item-size {
    @include small() {
      flex: 1 1 var(--sm-size);
      max-width: var(--sm-size);
      max-height: 100%;
    }
  }
}


.fx-column-container {
  .sm-fx-item-half {
    @include small() {
      flex: 1 1 50%;
      max-height: 50%;
    }
  }

  .sm-fx-item-size {
    @include small() {
      flex: 1 1 var(--sm-size);
      max-height: var(--sm-size);
    }
  }
}

.fx-column-container-fill {
  .sm-fx-item-half {
    @include small() {
      flex: 1 1 50%;
      max-height: 50%;
      max-width: 100%;
    }
  }

  .sm-fx-item-size {
    @include small() {
      flex: 1 1 var(--sm-size);
      max-height: var(--sm-size);
      max-width: 100%;
    }
  }
}