/* Responsive Web Design  */

<?php use de\pointedears\css\least\Mixins; ?>

/* Desktops with medium-size browser viewport (SVGA resolution) */

body {
  <?php
    Mixins::transition('',
        'margin-top   0.25s 0.75s linear,'
      . ' margin-left 0.25s 0.5s linear');
  ?>
}

.multi-display,
#content.fixed
{
  <?php
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . ' left  0.25s 0.5s linear');
  ?>
}

.menu .bow
{
  <?php
    Mixins::transition('',
        'width            0.5s 1s    linear,'
      . 'background-color 0s   0.75s linear'
    );
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . 'bottom 2.5s 0.5s ease');
  ?>
}
  
#bow-top {
  <?php
    Mixins::transition('',
        'left                        0.5s 1.0s linear,'
      . ' min-width                  0s   1.5s linear,'
      . ' border-top-left-radius     0.5s 1.0s linear,'
      . ' border-top-right-radius    0.5s 1.0s linear,'
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
      . ' opacity                    0s   1.0s linear');
  ?>
}

#bow-top .text {
  <?php
    Mixins::transition('-property', 'opacity');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

#bow-top-left {
  <?php
    Mixins::transition('-property', 'height');
    Mixins::transition('-duration', '0.125s');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

.menu-container
{
  <?php
    Mixins::transition('',
        'top      0.5s 1s linear,'
      . ' width   0.5s 1s linear,'
      . ' bottom  0.5s 1s linear,'
      . ' z-index 0s   1s linear');
  ?>
}  

.menu {
  <?php
    Mixins::transition('', 'height 0.5s 1s linear');
  ?>
}

.menu ul:first-child {
  <?php
    Mixins::transition('', 'padding-top 0.5s 1s linear');
  ?>
}

.menu .button
{
  <?php
    Mixins::transition('', 'width 0.5s 1s linear');
  ?>
}  

#bow #bottom {
  <?php
    Mixins::transition('', 'visibility 0s 1.625s linear');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('',
        'border-bottom-left-radius   0.5s    0.5s   ease,'
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
      . ' width                      0.5s    0.5s   ease,'
      . ' bottom                     0.0225s 1.625s linear,'
      . ' height                     0.0225s 1.625s linear');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors {
  <?php
    Mixins::transition('', 'opacity 0s 1.6475s linear');
  ?>
}  

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
  body {
    margin-left: 22em;
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
  }

  #bow #bottom
  {
    width: 20.8em;
  <?php
    /* Wait 0.5s for multi-display to be reduced in height */
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }
    
  #bow-bottom {
    border-bottom-left-radius: 2.4em;
    border-bottom-right-radius: 2em;
    width: 20.6em;
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '1.0s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
  }
  
  #bow-bottom .concave {
    width: 7.6em;
  <?php
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }

  #connectors .right {
    width: 5em;
    <?php
      /* Wait 1.0s for multi-display to be moved to right */
      Mixins::transition('', 'width 1.0s 0.5s ease');
    ?>
  }
  
  .multi-display
  {
    left: 15.8em;
  <?php
    Mixins::transition('',
        'left 0.5s 0.5s ease,'
      . 'top  0.5s 0.5s linear');
  ?>
  }

  #content.fixed {
    left: 22em;
  }
  
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}

/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 584px) {
  <?php require 'lcars-responsive-small.css'; ?>
}

/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
  html,
  #LCARS,
  .multi-display
  {
    max-width: 540px;
  }
*/
  <?php require 'lcars-responsive-small.css'; ?>  
}