@use 'sass:math';
@use './variables' as v;
@use '../../../components/base';
@use '../../../mixins/utils';
@use '../../../mixins/graphics';

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body > header {
  height: 60px;
  flex-shrink: 0;
  background: black;
  .company {
    display: none;
    padding: 10px;
    > h1 {
      margin: 0;
      color: white;
    }
  }
  .user {
    position: absolute;
    height: 100%;
    background: #333;
    color: white;
    top: 0;
    bottom: 0;
    right: 40px;
  }
  #user-box {
    color: white;
    float: right;
    margin-right: 20px;
    p {
      margin: 0;
      padding: 0;
    }
    a {
      color: blue;
    }
  }
}

body > div.container {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  > div.left {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    background-color: v.$nav-bg;
    > nav {
      flex-grow: 1;
      //$width: 140px;
      //$sub-width: 120px;
      position: relative;
      height: 100%;

      ul {
        @include utils.wipe-list;
        display: block;
        li {
          > a {
            display: block;
            text-decoration: none;
            color: white;
            transition: background 0.5s;
          }

          &:hover {
            > a {
              background-color: darken(v.$nav-bg, 10%);
            }
          }
        }
      }

      > ul {
        font-size: 12px;
        line-height: 1;
        > li {
          $icon-size: 24px;
          transition: margin 0.5s;
          > a {
            padding-right: 25px;
            position: relative;
            overflow: hidden;
            &:before {
              content: '';
              display: inline-block;
              vertical-align: middle;
              width: $icon-size;
              height: $icon-size;
              margin: 3px 9px;
              background: center center / 100% auto no-repeat;
            }
            &:after {
              $triangle-size: 14px;
              content: '';
              display: block;
              position: absolute;
              right: math.div(-$triangle-size, 2);
              transition: right 0.5s;
              top: $icon-size + 3px - math.div(math.div($triangle-size, 2), 2);
              @include graphics.triangle($height: math.div($triangle-size, 2), $color: base.$body-bg);
            }
          }
          &.current {
            > a {
              background-color: base.$base-color;
              &:after {
                right: 0;
              }
            }
          }
          &:not(.current):not(:hover) {
            > ul {
              height: 0 !important;
            }
          }
          > ul {
            overflow: hidden;
            display: block;
            background: lighten(v.$nav-bg, 10%);
            transition: height 0.5s;
            > li {
              > a {
                padding: 4px 0px 4px 20px;
              }
              &.current {
                > a {
                  background: transparentize(base.$base-color, 0.4);
                }
              }
            }
          }
          @import 'images/navigation';
        }
      }
    }

    a.logout {
      display: block;
      margin: 0 auto 10px auto;
      width: 30px;
      // http://iconmonstr.com/log-out-8/
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2020%22%3E%3Cpath%20d%3D%22M0%200v20h14v-2H2V2h12V0H0zm18%207.408L20.963%2010%2018%2012.592V11h-8V9h8V7.408zM16%203v4H8v6h8v4l8-7-8-7z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E')
        0 0 / 100% auto no-repeat;
      white-space: nowrap;

      @include utils.ratio(math.div(24, 20));
      span {
        display: none;
      }
    }
  }
  > main {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }
}

.page {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  overflow: hidden;

  &.form {
    > div.content {
      padding-top: 45px + v.$global-padding;
    }
  }

  > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    background: #e6f1f6;
    padding: 0 v.$global-padding;
    border-bottom: 1px solid #c1dce8;
    //box-shadow: 0 5px 0px 0px rgba(0,0,0,0.1);
    h1 {
      color: darken(base.$base-color, 10%);
      line-height: 50px;
      margin: 0;
      flex: 0 1 auto;
    }
    > button,
    > .button {
      display: block;
      flex: 0 0 auto;
    }
  }

  > div.content {
    flex: 1 0 0px;
    padding: v.$global-padding;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  &.crud {
    display: flex;
    flex-direction: row;
    .form {
      flex-grow: 1;
    }
    .collection {
      width: 300px;
    }
  }
}

body > footer {
  width: 100%;
  height: 40px;
  flex-shrink: 0;
  background: black;
  color: white;
  text-align: center;
  padding: 5px 0 !important;
  a {
    color: white;
  }
}