/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// Alerts
////////////////////////

// Base styles

.alert {
  padding: direction-sides($ic-sp $ic-sp*3 $ic-sp $ic-sp);
  background-color: $ic-bg-light-alert;
  border-radius: $ic-border-radius;
  color: $ic-bg-light-alert-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-alert-text;
  }
}
.alert h4 {
  margin: 0;
}

// Adjust close link position

.alert .close {
  position: relative;
  top: -2px;
  #{direction(right)}: -21px;
  line-height: $baseLineHeight;
}

// Alternate State Colors

.alert-success {
  background-color: $ic-bg-light-success;
  color: $ic-bg-light-success-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-success-text;
  }
}
.alert-danger,
.alert-error {
  background-color: $ic-bg-light-danger;
  color: $ic-bg-light-danger-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-danger-text;
  }
}
.alert-info {
  background-color: $ic-bg-light-primary;
  color: $ic-bg-light-primary-text;

  @if $use_high_contrast {
    border: 1px solid $ic-bg-light-primary-text;
  }
}

//// end Alerts

//// Flash Notifications
////////////////////////

.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
  position: relative;
  box-sizing: border-box;
  padding: direction-sides($ic-sp/2 40px $ic-sp/2 $ic-sp*4);
  margin: 0 auto;
  width: 475px;
  min-height: 20px;
  line-height: 1.3;
  z-index: 2;
  vertical-align: middle;
  box-shadow: 0 1px 8px rgba(black, 0.25);
  border: 2px solid;
  border-radius: $baseBorderRadius*2;
  background-color: $ic-color-light;

  .close_link {
    position: absolute;
    #{direction(right)}: $ic-sp/3;
    top: 50%;
    margin-top: -12px;
    text-decoration: none;
  }

  &.no_close .close_link {
    display: none;
  }

  .ic-flash__icon {
    position: absolute;
    top: 0;
    #{direction(left)}: 0;
    width: $ic-sp*3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $ic-color-light;

    i[class*=icon-],
    i[class^=icon-] {
      &:before {
        #{direction(left)}: -1px; // account for left border, so icon looks centered
      }
    }

  }

  &.ic-flash-static {
    width: auto;
    border-radius: 0; // corners look bad when msg is full-width
  }
}

.responsive_awareness .ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error {
  width: auto; // purely to override the 475 in the original class
  min-width: 17rem; // designs minimum width minus the spacing they want
  max-width: 32rem; // design has a max-width they want alerts to display
}

.ic-flash-info {
  border-color: var(--ic-brand-primary);
  .ic-flash__icon { background-color: var(--ic-brand-primary); }
}

.ic-flash-success {
  border-color: $ic-color-success;
  .ic-flash__icon { background-color: $ic-color-success; }
}

.ic-flash-warning {
  border-color: $ic-color-alert;
  .ic-flash__icon { background-color: $ic-color-alert; }
}

.ic-flash-error {
  border-color: $ic-color-danger;
  .ic-flash__icon { background-color: $ic-color-danger; }
}

.ic-flash--Theme-Editor {
  border-color: $ic-color-dark;
  text-align: center; // need this or text is obscured by theme editor sidebar
  .ic-flash__icon { background-color: $ic-color-dark; }
}

.ic-flash__headline {
  margin: 0;
  font-weight: bold;
}

.ic-flash__text {
  margin: $ic-sp/2 0;
  &:first-of-type { margin-top: 0; }
  &:last-child { margin-bottom: 0; }
}

// Buttons in Flash actions
a.Button--flash {
  text-decoration: none;
  @if $use_high_contrast {
    text-decoration: underline;
  }
}

// .ic-alert-masquerade-student-view is used when a user is
// masquerading or using student view. In the new UI, it gives
// Canvas the appearance of being inside a 3px frame.
.ic-alert-masquerade-student-view {
  padding: $ic-sp/2 $ic-sp;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: $ic-color-action;
  color: $ic-color-light;
  // This adds a fixed top border for the fixed bottom alert,
  // so the top border doesn't disappear on scroll
  &:after {
    content: "";
    position: fixed;
    top: 0; #{direction(left)}: 0;
    width: 100%;
    height: 3px;
    background: $ic-color-action;
  }

  .avatar {
    width: $ic-sp*3; height: $ic-sp*3;
  }
}

// When the fixed bottom alert is showing, add a
// left and right border, making Canvas appear as if
// it is inside a frame.
body.is-masquerading-or-student-view {
  border-#{direction(right)}: 3px solid $ic-color-action;
  .ic-app-header { border-#{direction(left)}: 3px solid $ic-color-action; }
}

.ic-alert-masquerade-student-view-module {
  flex: 1;
  padding: 0 $ic-sp/2;
  &:first-of-type { padding-#{direction(left)}: 0; }
  &:last-of-type {
    padding-#{direction(right)}: 0;
    &.ic-alert-masquerade-student-view-module--buttons {
      text-align: direction(right);
    }
  }
  &.ic-alert-masquerade-student-view-module--header {
    font-weight: bold;
  }
  &.ic-alert-masquerade-student-view-module--description {
    font-style: italic;
    @include fontSize($ic-font-size--xsmall);
    line-height: 1.3;
  }
}


$ic-notification-icon-size: 22px;
$ic-notification-border-thickness: 2px;

@mixin ic-notification-color-scheme($color) {
  border-color: $color;
  .ic-notification__icon { background: $color; }
}

// .ic-notification
.ic-notification {
  display: flex;
  border: $ic-notification-border-thickness solid var(--ic-brand-primary);
  margin-bottom: $ic-sp;
  box-shadow: 0 1px 6px rgba(black, 0.2);
  border-radius: $baseBorderRadius;
  box-sizing: border-box;
  form { margin: 0; }
  &.ic-notification--success { @include ic-notification-color-scheme($ic-color-success); }
  &.ic-notification--alert { @include ic-notification-color-scheme($ic-color-alert); }
  &.ic-notification--danger { @include ic-notification-color-scheme($ic-color-danger); }
  // variant for global notifications created by admin via Settings
  &.ic-notification--admin-created {
    .ic-notification__content {
      display: flex;
      @include breakpoint(desktop) { align-items: flex-start; }
    }
    .ic-notification__message { flex: 1; }
    .ic-notification__actions {
      margin-#{direction(left)}: $ic-sp*2;
      @include breakpoint(desktop) { margin-#{direction(left)}: $ic-sp*3; }
    }
    .ic-notification__title {
      display: block;
      @include fontSize($ic-font-size--medium)
      margin: 0 0 $ic-sp/2;
    }
  }
}

.ic-notification__icon {
  background: var(--ic-brand-primary);
  flex: 0 0 $ic-sp*4;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-#{direction(left)}-radius: ($baseBorderRadius - $ic-notification-border-thickness);
  border-bottom-#{direction(left)}-radius: ($baseBorderRadius - $ic-notification-border-thickness);
  box-sizing: border-box;
  @include overwrite-default-icon-size($ic-notification-icon-size);
  i[class*=icon-], i[class^=icon-] {
    color: $ic-color-light;
    text-shadow: none;
  }
}

.ic-notification__title {
  margin-#{direction(right)}: $ic-sp/3;
  @include fontSize($ic-font-size--small);
  display: inline;
  font-weight: bold;
}

.ic-notification__content {
  flex: 1;
  padding: $ic-sp;
  box-sizing: border-box;
  background: $ic-color-light;
  position: relative;
}

.ic-notification__message {
  box-sizing: border-box;
  p:last-of-type { margin-bottom: 0; }
}

.ic-notification__actions {
  box-sizing: border-box;
}

.ic-notification__admin-actions {
  position: absolute;
  #{direction(right)}: $ic-sp;
  top: $ic-sp;
}

.notification_account_content {
  width: 100%;
}

.notification_account_content_text {
  font-size: 0.8em;
  padding-#{direction(left)}: 12px;
  line-height: 22px;
}
