@import "nuit/_custom";
@import "nuit/_foundation_overrides";
@import "scss/foundation";
@import "nuit/_variables";
@import "bourbon/bourbon";
@import "foundation-icons";

.size-12 { font-size: 12px; }

.size-14 { font-size: 14px; }

.size-16 { font-size: 16px; }

.size-18 { font-size: 18px; }

.size-21 { font-size: 21px; }

.size-24 { font-size: 24px; }

.size-36 { font-size: 36px; }

.size-48 { font-size: 48px; }

.size-60 { font-size: 60px; }

.size-72 { font-size: 72px; }

.container {
    position: relative;
}

.top-bar-section {
    .collapse {
        display: none;
    }

    .label {
        padding: 0.2rem 0.3rem;
        font-size: 0.4rem;
        display: inline-block;
        top: -0.5rem;
    }

}

.sidebar {

    background-color: $sidebar-bg;
    padding: 20px;
    margin-bottom: $sidebar-gutter-spacing;

    &.on-left {
        top: 0;
        left: $sidebar-gutter-spacing;
        position: absolute;

        @media #{$large-up} {
            & ~ .main {
                margin-left: $sidebar-left-large-width + $sidebar-gutter-spacing;
            }
        }
        @media #{$medium-only} {
            & ~ .main {
                margin-left: $sidebar-left-medium-width + $sidebar-gutter-spacing;
            }
        }

    }

    &.on-right {
        max-width: $sidebar-right-max-width;
        top: 0;
        right: $sidebar-gutter-spacing;
        position: absolute;
    }

    .side-nav {
        padding-top: 0;
    }

    h5, dt {
        margin: 0;
        padding: 2px 0;
        text-transform: uppercase;
        font-size: 0.78rem;
        font-weight: normal;
    }

    hr {
        margin-top: 0;
    }

    p, table, dd, ul, ol {
        font-size: 0.8rem;
    }

    p, table, ul, ol {
        margin-top: 0.8rem;
    }

    table tr td, table tr th {
        font-size: 0.8rem;
    }

    table {
        width: 100%;
    }

    .panel {
        padding: 0.8rem;
        margin-top: 0.8rem;
    }

    form {

        margin-top: 0.8rem;
        margin-bottom: 0.8rem;

        label, input, select, button, .postfix.button {
            font-size: 0.8rem;
        }

        select, input[type=text], .postfix.button {
            height: 2rem;
            line-height: 2rem;
        }

        select {
            line-height: initial;
        }

        button {
            padding: 0.5rem 0.8rem;
            width: 100%;
            margin: 0 0 1rem;
        }

    }

    .nuit-collapsed {
        hr {
            margin-top: 1.25rem;
        }
    }

    i.nuit-collapse {
        opacity: 0.8;
        cursor: pointer;
        @include transform(rotate(-90deg));
        @include transition(all, 0.5s);
        &:hover {
            opacity: 1;
        }
        &.nuit-collapsed {
            @include transform(rotate(90deg));
        }
    }

    ul.side-nav {

        li {

            &.button-bar {

                font-size: 0.8rem;
                margin-bottom: 1em;

                &:last-child {
                    margin-bottom: 0;
                }

                ul.button-group {

                    margin-top: 0.2em;

                    .button {
                        padding: 0.1em 0.3em;
                        color: white;
                        margin: 0;
                    }

                }

            }

            margin: 0;
            padding: 0;

            &.divider {
                margin: 16px 0;
            }

            &.heading {
                padding: 2px 0;
                text-transform: uppercase;
                font-size: 0.78rem;
            }

            .menu-item {
                padding: 0.33333rem 0;
            }

            p {
                margin-bottom: 0;
            }

            &.active {
                & > .menu-item {
                    margin: 0 -20px;
                    padding-left: 20px;
                    padding-right: 20px;
                    background: $sidebar-link-active-bg;
                    font-weight: bold;
                    color: $sidebar-link-active-color;
                }
            }

            &:hover {
                & > .menu-item {
                    margin: 0 -20px;
                    padding-left: 20px;
                    padding-right: 20px;
                    color: $sidebar-link-hover-color;
                    background: $sidebar-link-hover-bg;
                }
            }

        }
    }

    section:last-child hr {
        display: none;
    }

    @media #{$large-up} {
        width: $sidebar-left-large-width;
        &.on-right + .main {
            padding-right: $sidebar-right-max-width + $sidebar-gutter-spacing;
        }
    }

    @media #{$medium-down} {
        width: $sidebar-left-medium-width;
    }

}

/* Form overrides */

.switch {
    input + label {
        margin-top: 0.2rem;
        margin-bottom: 0.8rem;
    }
    &.tiny input + label {
        margin-top: 0.32rem;
        margin-bottom: 1.15rem;
    }
    &.small input + label {
        margin-top: 0.25rem;
        margin-bottom: 1rem;
    }
}

/* Right Menu Reveals */

@media #{$medium-down} {
    .right-menu-reveal {
        @include reveal-modal-base;
        @include reveal-modal-style(
            $bg:$reveal-modal-bg,
            $padding:$reveal-modal-padding,
            $border:true,
            $box-shadow:true,
            $radius:false,
            $top-offset:$reveal-position-top
        );
        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
        hr:last-child {
            display: none;
        }
        .close-reveal-modal {
            @include reveal-close;
        }
    }
}
@media #{$large-up} {
    .right-menu-reveal {
        .close-reveal-modal {
            display: none;
        }
    }
}

.main {

    margin-top: 1rem;

    .actions.button.nuit-dropdown {
        padding: 0.5rem 0.8rem;
    }

    .actions:before {
        display: none;
    }

}

.pagination-totals {
    font-size: 0.8rem;
    color: $pagination-link-font-color;
}

.nuit-loader {

  display: inline-block;
  position: relative;

  .nuit-loader-text {
    display: inline-block;
    margin-top: 0.5em;
  }

  .container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    @include animation(rotate 2.4s linear infinite);
  }

  .dotwrap {
    width: 40%;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -20%;
    top: 50%;
    margin-top: -47%;
    @include animation(smallbig 2.4s linear infinite);
  }

  .dot {
    display: none;
    width: 100%;
    height: 100%;
    @include transition(all 1s ease);
    position: relative;
    font-size: 1.2em;
    line-height: 1;
    @include animation(dots 2.4s linear infinite);

    &:after {
      content: $loader-subicon;
    }
  }

  @for $i from 1 through length($loader-colors) {
    .dotwrap:nth-child(#{length($loader-colors)}n+#{$i}) {
      @include transform(rotate(#{360/length($loader-colors)*$i}deg));
      .dot {
        display: block;
        color: nth($loader-colors, $i);
      }
    }
  }

}

@include keyframes(rotate) {
  0% { @include transform(rotate(0)); }
  100%{ @include transform(rotate(360deg)); }
}
@include keyframes(smallbig) {
  50% {  height: 40%;  margin-top: -20%; }
}
@include keyframes(dots) {
  50% { opacity: .1; }
  100%{ opacity: .9; }
}

.nuit-loader-size16 {
  @include nuit-loader(16px);
}
.nuit-loader-size32 {
  @include nuit-loader(32px);
}
.nuit-loader-size48 {
  @include nuit-loader(48px);
}
.nuit-loader-size64 {
  @include nuit-loader(64px);
}
.nuit-loader-size80 {
  @include nuit-loader(80px);
}
.nuit-loader-size96 {
  @include nuit-loader(96px);
}

.fixed-modal {

    @media #{$medium-up} {
        width: $fixed-modal-width;
        margin-top: 5rem;
        border: 1px solid #ccc;
    }

    margin: 0 auto;

    header {

        background-color: $topbar-bg;
        padding: 1em;
        text-align: center;

        h1 {
            color: $topbar-link-color;
            font-size: 1.6em;
            margin: 0;
        }

    }

    section {

        @media #{$medium-up} {
            padding: 1rem;
            padding-bottom: 0;
        }

        .full {
            margin-left: -1rem;
            margin-right: -1rem;
        }

        .submit {
            text-align: center;
        }

        .nuit-loader {
            margin-bottom: 1em;
        }

        .errorcode {
            @include pricing-table-price;
            margin-bottom: 1rem;
        }

    }

}

.center {
    text-align: center;
}

.nuit-breadcrumbs {
    margin-bottom: 0.5em;
}

.alert-box.debug {
  @include alert(
    $bg: #cccccc
  );
}

.alert-box {
    &:before {
        padding-right: 0.5em;
    }
    &.debug {
        @include alert(
            $bg: #cccccc
        );
        &:before {
            @extend .fi-widget:before;
        }
    }
    &.info:before {
        @extend .fi-star:before;
    }
    &.success:before {
        @extend .fi-check:before;
    }
    &.warning:before {
        @extend .fi-alert:before;
    }
    &.alert:before {
        @extend .fi-prohibited:before;
    }
}

.responsive {
    &.grouped {
        @media #{$small-only} {
            @include grouped-responsive-table;
        }
        &.medium-down {
            @media #{$medium-down} {
                @include grouped-responsive-table;
            }
        }
    }
    &.scroll {
        @media #{$small-only} {
            @include scroll-responsive-table(#{upper-bound($small-range)});
        }
        &.medium-down {
            @media #{$medium-down} {
                @include scroll-responsive-table(#{upper-bound($medium-range)});
            }
        }
    }
}

// Tabs

.tabs dd > a {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: $global-radius;
}

.tabs dd.active > a {
    background: $primary-color;
    color: #fff;
}

h1 span {
    font-size: 0.5em;
}

.key-value {

    li > span {

        display: block;
        padding: 0.5em;
        font-size: 0.8em;
        text-align: center;

        &.key {
            @include border-top-radius(3px);
            background: $topbar-bg;
            color: $topbar-link-color;
        }

        &.value {
            @include border-bottom-radius(3px);
            border: 1px solid $table-border-color;
            border-top: none;
        }

    }
}

.required {
    label {
        font-weight: bold;
    }
}

@media #{$small-only} {

    // scss/foundation/components/_buttons.scss
    button, .button {
        // Duplicate of .expand
        &.small-only-expand { @include button-size($padding:null,$full-width:true); }
    }

}

@media #{$medium-down} {

    // scss/foundation/components/_buttons.scss
    button, .button {
        // Duplicate of .expand
        &.medium-down-expand { @include button-size($padding:null,$full-width:true); }
    }

}

@media #{$medium-only} {

    // scss/foundation/components/_buttons.scss
    button, .button {
        // Duplicate of .expand
        &.medium-only-expand { @include button-size($padding:null,$full-width:true); }
    }

}

@media #{$medium-up} {

    // Duplicate of .right, cannot use @extend because of media queries
    // foundation/components/_global.scss
    .medium-right { float: right !important; }

    // scss/foundation/components/_forms.scss
    label {
        // Duplicate of label.right
        &.medium-right { @include form-label(right,false); }
        // Duplicate of label.inline
        &.medium-inline { @include form-label(inline,false); }
    }

    // scss/foundation/components/_buttons.scss
    button, .button {
        // Duplicate of .expand
        &.medium-up-expand { @include button-size($padding:null,$full-width:true); }
    }

}

@media #{$large-only} {

    // scss/foundation/components/_buttons.scss
    button, .button {
        // Duplicate of .expand
        &.large-only-expand { @include button-size($padding:null,$full-width:true); }
    }

}

@media #{$large-up} {

    // Duplicate of .right
    // foundation/components/_global.scss
    .large-right { float: right !important; }

    // scss/foundation/components/_forms.scss
    label {
        // Duplicate of label.right
        &.large-right { @include form-label(right,false); }
        // Duplicate of label.inline
        &.large-inline { @include form-label(inline,false); }
    }

}
