//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

//-----------------------------
// Search
//-----------------------------

@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../motion" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline";
@use "../../utilities/button-reset";
@use "../../utilities/layer" as *;

/// Module styles
/// @access public
/// @group module

@mixin module {
  .#{$prefix}--module__background {
    background-color: $background-main;
  }

  .#{$prefix}--module {
    @include reset;
    @include font-family("sans");
    display: flex;
    flex-direction: column;
    padding: calcRem(16px);
    //flex: 1 0 auto;
    margin: 0;

    .#{$prefix}--module__inner {
      @include layer("raised");
      box-shadow: 0px 1px 4px rgba(#000000, 0.05),
        0px 25px 30px -15px rgba(#000000, 0.1);
      background-color: $background-main;
      border-radius: 3px;
      width: 100%;
    }

    .#{$prefix}--module__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 1.2rem 0.8rem;
      border-bottom: 1px solid $border-strong;
    }

    .#{$prefix}--module__filter {
      display: flex;
    }

    .#{$prefix}--module__footer {
      display: flex;
      align-items: center;
      padding: 0.7rem 1.2rem;
      border-top: 1px solid $border-strong;
      @include type-style("caption-01");
    }

    .#{$prefix}--module__title {
      @include type-style("heading-02");
      // @include font-smoothing;
      letter-spacing: 0;
      font-weight: 600;
      color: $text-body-default;
    }

    .#{$prefix}--module__content {
      /*display: flex;
      flex-direction: column;
      align-items: flex-start;*/
      flex: 3;
      padding: 0.8rem 1.2rem;

      > * {
        &:first-child {
          margin-top: 0;
        }
        &:last-child {
          margin-top: 0;
        }
      }
      /*p {
        @include typescale('zeta');
      }*/
    }

    // > IE11 TODO: Remove when IE11 support dropped
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      //_:-ms-fullscreen,
      //:root  {
    }

    // Edge
    /*@supports (-ms-accelerator:true) {
      .#{$prefix}--module__content {
        flex: 3;
      }
    }*/

    .#{$prefix}--module__content--centered {
      align-items: center;
      justify-content: center;
      padding: 5rem;
    }

    .#{$prefix}--module__content--no-padding {
      padding: 0;
    }

    .#{$prefix}--module__content--scrollable {
      max-height: calcRem(300px);
      overflow-y: scroll;
      margin-bottom: 2rem;
    }
  }

  .#{$prefix}--module--light {
    .#{$prefix}--module__inner {
      box-shadow: none;
      border: 2px solid rgba(#000, 0.1);
      background: $background-main;
    }

    &.#{$prefix}--module--with-hover {
      cursor: pointer;
      &:hover {
        .#{$prefix}--module__inner {
          border-color: $background-primary;
        }
      }
    }
  }

  .#{$prefix}--module--full-height {
    height: 100%;
    .#{$prefix}--module__inner {
      height: 100%;
    }
  }

  .#{$prefix}--module--dark {
    .#{$prefix}--module__inner {
      box-shadow: none;
      background: $background-primary;
      color: $text-inverse-default;
    }

    .#{$prefix}--module__header {
      border-bottom-color: $border-subtle;
    }

    .#{$prefix}--module__footer {
      border-top-color: $border-subtle;
    }

    .#{$prefix}--module__title {
      color: $text-inverse-default;
    }
  }
}

.#{$prefix}--module--no-margin {
  padding: 0;
}

// > IE11 TODO: Remove when IE11 support dropped
_:-ms-fullscreen,
:root {
  .#{$prefix}--module__inner {
    position: relative;
  }

  .#{$prefix}--module__content {
    padding-bottom: 4rem;
    overflow: hidden;
  }

  // Footer at bottom
  .#{$prefix}--module__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .#{$prefix}--module__content {
    flex: inherit;
  }
}