// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Dialog styles


// Mixin for IE9 specific styles
@mixin dialogPositioningIE9Fallback {
  vertical-align: middle;
  display: inline-block;
}

.ms-Dialog {
  background-color: transparent;
  position: fixed;
  height: 100%;
  width:  100%;
  top:  0;
  left: 0;
  z-index: $ms-zIndex-Dialog;

  // Fallback for IE9
  display: block;
  font-size: 0;
  line-height: 100vh;
  text-align: center;

  // Flexbox for Modern Browsers
	@include flexBox();
	@include alignItems(center); 

	&::before {
  	@include dialogPositioningIE9Fallback();
    content: "";
    height: 100%;
    width: 0;
  }

  .ms-Button.ms-Button--compound {
    display: block;
    margin-left: 0;
  }

  .ms-Overlay {
    z-index: $ms-zIndex-back;

      @media screen and (-ms-high-contrast: active) {
        opacity: 0;
      }
  }
}

// The actual dialog element
.ms-Dialog-main {
  @include dialogPositioningIE9Fallback();
  @include drop-shadow();
  background-color: $ms-color-white;
  box-sizing: border-box;
  line-height: 1.35;
  margin: auto;
  width: 288px;
  position: relative;
  text-align: left;
  outline: 3px solid transparent;
}

// Close button, hidden by default
.ms-Dialog-button.ms-Dialog-button--close {
  display: none;
  position: absolute;
  margin:  0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  top: 12px;
  right: 12px;
  padding: 8px;
  z-index: $ms-zIndex-front;

  .ms-Icon.ms-Icon--x {
    color: $ms-color-neutralSecondary;
    font-size: $ms-font-size-m + 2;
  }
}

.ms-Dialog-inner {
  height: 100%;
  padding: 0 20px 20px;
}

.ms-Dialog-header {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px 15px;
}

.ms-Dialog-title {
  margin: 0;
  font-family: $ms-font-family-light;
  font-size: $ms-font-size-xl;
}

.ms-Dialog-content {
  position: relative;
  width: 100%;

  // Add margin bottom between compound buttons
  .ms-Button.ms-Button--compound:not(:last-child) { 
    margin-bottom: 20px; 
  }
}

.ms-Dialog-subText {
  margin: 0 0 20px 0;
  padding-top: 8px;
  font-family: $ms-font-family-semilight;
  color: $ms-color-neutralPrimary;
  font-size: $ms-font-size-s;
}

.ms-Dialog-actions {
  position: relative;
  width: 100%;
  min-height:  24px;
  line-height: 24px;
  margin: 20px 0 0;
  font-size: 0;
  
  .ms-Button { 
    line-height: normal; 
  }
}

.ms-Dialog-actionsRight {
  text-align: right;
  font-size: 0;
  
  // Reset spacing for first button
  .ms-Dialog-action:first-child {
    margin: 0; 
  }
  
  // Spacing between bottom buttons
  .ms-Dialog-action + .ms-Dialog-action { 
    margin: 0 0 0 16px; 
  }
}


//= Modifier: Dialog with close button
//
.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
  // Push the right side over so the icon doesn't overlap the text 
  .ms-Dialog-title {
    margin-right: 20px;
  }

  // Show the close button  
  .ms-Dialog-button.ms-Dialog-button--close {
    display: block;
  }
}


//= Modifier: Multiline button dialog
//
.ms-Dialog.ms-Dialog--multiline {
  .ms-Dialog-title {
    font-size: $ms-font-size-xxl;
  }

  .ms-Dialog-inner {
    padding: 0 20px 20px;
  }
}


//= Modifier: Large header dialog
//
.ms-Dialog.ms-Dialog--lgHeader {
  .ms-Dialog-header {
    background-color: $ms-color-themePrimary;
    padding: 26px 20px 28px;
    margin-bottom: 8px;
  }

  .ms-Dialog-title {
    font-size: $ms-font-size-xxl;
    font-family: $ms-font-family-light;
    color: $ms-color-white;
  }

  .ms-Dialog-subText {
    font-size: $ms-font-size-m;
  }
}



@media (min-width: $ms-screen-md-min) {
  // Allow wider dialog on larger screens
  .ms-Dialog-main {
    width: auto;
    min-width: 288px;
    max-width: 340px; 
  }
}