@import '../../themes/default/modules/shape.variables';

@if $use-shape {
  /*******************************
  //@-          Shape
  *******************************/

  .ui.shape {
    position: relative;
    vertical-align: top;
    display: $shape-display;
    perspective: $shape-perspective;
    transition: $shape-transition;
  }

  .ui.shape .sides {
    transform-style: preserve-3d;
  }

  .ui.shape .side {
    display: none;
    opacity: 1;
    width: 100%;

    margin: $shape-side-margin !important;
    backface-visibility: $shape-backface-visibility;
  }

  .ui.shape .side * {
    backface-visibility: visible !important;
  }

  /*******************************
              Types
  *******************************/

  .ui.cube.shape .side {
    min-width: $shape-cube-size;
    height: $shape-cube-size;

    padding: $shape-cube-padding;

    background-color: $shape-cube-background;
    color: $shape-cube-text-color;
    box-shadow: $shape-cube-box-shadow;
  }
  .ui.cube.shape .side > .content {
    width: 100%;
    height: 100%;
    display: table;

    text-align: $shape-cube-text-align;
    user-select: text;
  }
  .ui.cube.shape .side > .content > div {
    display: table-cell;
    vertical-align: middle;
    font-size: $shape-cube-font-size;
  }

  /*******************************
            Variations
  *******************************/

  .ui.text.shape.animating .sides {
    position: static;
  }
  .ui.text.shape .side {
    white-space: nowrap;
  }
  .ui.text.shape .side > * {
    white-space: normal;
  }


  /*******************************
              States
  *******************************/

  /*--------------
      Loading
  ---------------*/

  .ui.loading.shape {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }


  /*--------------
      Animating
  ---------------*/

  .ui.shape .animating.side {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: $shape-animating-z-index;
  }
  .ui.shape .hidden.side {
    opacity: $shape-hidden-side-opacity;
  }


  /*--------------
        CSS
  ---------------*/

  .ui.shape.animating .sides {
    position: absolute;
    transition: $shape-transition;
  }
  .ui.shape.animating .side {
    transition: $shape-side-transition;
  }
  .ui.shape .animating.side *,
  .ui.shape.animating .side * {
    transition: none;
  }

  /*--------------
      Active
  ---------------*/

  .ui.shape .active.side {
    display: block;
  }
}

@import '../../themes/default/modules/shape.style';