@import "./alert";
@import "./alert.md.vars";

// Material Design Alert
// --------------------------------------------------

.alert-md {
  font-family: $alert-md-font-family;
  font-size: $alert-md-font-size;
}

.alert-md .alert-wrapper {
  @include border-radius($alert-md-border-radius);

  max-width: $alert-md-max-width;

  background-color: $alert-md-background-color;

  box-shadow: $alert-md-box-shadow;
}

// Material Design Alert Header
// --------------------------------------------------

.alert-md .alert-head {
  @include text-align($alert-md-head-text-align);

  @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start);
}

.alert-md .alert-title {
  font-size: $alert-md-title-font-size;
  font-weight: $alert-md-title-font-weight;
}

.alert-md .alert-sub-title {
  font-size: $alert-md-sub-title-font-size;
}


// Material Design Alert Message
// --------------------------------------------------

.alert-md .alert-message,
.alert-md .alert-input-group {
  @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);

  color: $alert-md-message-text-color;
}

.alert-md .alert-message {
  max-height: $alert-md-content-max-height;

  font-size: $alert-md-message-font-size;
}

.alert-md .alert-message:empty {
  @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
}


// Material Design Alert Input
// --------------------------------------------------

.alert-md .alert-input {
  @include placeholder($alert-md-input-placeholder-color);
  @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);

  border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
  color: $alert-md-input-text-color;
}

.alert-md .alert-input:focus {
  @include margin(null, null, $alert-md-input-margin-bottom - 1, null);

  border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
}


// Material Design Alert Radio/Checkbox Group
// --------------------------------------------------

.alert-md .alert-radio-group,
.alert-md .alert-checkbox-group {
  position: relative;
  overflow: auto;

  max-height: $alert-md-content-max-height;

  border-top: $alert-md-list-border-top;
  border-bottom: $alert-md-list-border-bottom;
}

.alert-md .alert-tappable {
  position: relative;
  display: flex;

  overflow: hidden;

  height: $alert-md-tappable-height;

  contain: strict;
}


// Material Design Alert Radio
// --------------------------------------------------

.alert-md .alert-radio-label {
  @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);

  overflow: hidden;

  flex: 1;

  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-md-radio-label-text-color;
}

// Material Design Alert Radio Unchecked Circle
// ---------------------------------------------------

.alert-md .alert-radio-icon {
  @include position($alert-md-radio-top, null, null, $alert-md-radio-left);
  @include border-radius($alert-md-radio-border-radius);

  position: relative;
  display: block;

  width: $alert-md-radio-width;
  height: $alert-md-radio-height;

  border-width: $alert-md-radio-border-width;
  border-style: $alert-md-radio-border-style;
  border-color: $alert-md-radio-border-color-off;
}

// Material Design Alert Radio Checked Dot
// ---------------------------------------------------

.alert-md .alert-radio-inner {
  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
  @include border-radius($alert-md-radio-icon-border-radius);

  position: absolute;

  width: $alert-md-radio-icon-width;
  height: $alert-md-radio-icon-height;

  background-color: $alert-md-radio-border-color-on;
  transform: $alert-md-radio-icon-transform-off;
  transition: $alert-md-radio-icon-transition;
}


// Material Design Alert Radio Checked
// ---------------------------------------------------

.alert-md [aria-checked=true] .alert-radio-label {
  color: $alert-md-radio-label-text-color-checked;
}

.alert-md [aria-checked=true] .alert-radio-icon {
  border-color: $alert-md-radio-border-color-on;
}

.alert-md [aria-checked=true] .alert-radio-inner {
  transform: $alert-md-radio-icon-transform-on;
}


// Material Design Alert Checkbox Label
// --------------------------------------------------

.alert-md .alert-checkbox-label {
  @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);

  overflow: hidden;

  flex: 1;

  text-overflow: ellipsis;
  white-space: nowrap;

  color: $alert-md-checkbox-label-text-color;
}


// Material Design Alert Checkbox Outline: Unchecked
// --------------------------------------------------

.alert-md .alert-checkbox-icon {
  @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left);
  @include border-radius($alert-md-checkbox-border-radius);

  position: relative;

  width: $alert-md-checkbox-width;
  height: $alert-md-checkbox-height;

  border-width: $alert-md-checkbox-border-width;
  border-style: $alert-md-checkbox-border-style;
  border-color: $alert-md-checkbox-border-color-off;

  contain: strict;
}

// Material Design Alert Checkbox Checkmark: Checked
// --------------------------------------------------

.alert-md [aria-checked=true] .alert-checkbox-icon {
  border-color: $alert-md-checkbox-border-color-on;
  background-color: $alert-md-checkbox-border-color-on;
}

.alert-md [aria-checked=true] .alert-checkbox-inner {
  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);

  position: absolute;

  width: $alert-md-checkbox-icon-width;
  height: $alert-md-checkbox-icon-height;

  border-width: $alert-md-checkbox-icon-border-width;
  border-top-width: 0;
  border-left-width: 0;
  border-style: $alert-md-checkbox-icon-border-style;
  border-color: $alert-md-checkbox-icon-border-color;
  transform: $alert-md-checkbox-icon-transform;
}


// Material Design Alert Button
// --------------------------------------------------

.alert-md .alert-button-group {
  @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);

  box-sizing: border-box;

  flex-wrap: $alert-md-button-group-flex-wrap;
  justify-content: $alert-md-button-group-justify-content;
}

.alert-md .alert-button {
  @include border-radius($alert-md-button-border-radius);

  @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);

  @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);

  @include text-align($alert-md-button-text-align);

  // necessary for ripple to work properly
  position: relative;
  overflow: hidden;

  font-weight: $alert-md-button-font-weight;
  text-transform: $alert-md-button-text-transform;
  color: $alert-md-button-text-color;
  background-color: $alert-md-button-background-color;
}

.alert-md .alert-button.activated {
  background-color: $alert-md-button-background-color-activated;
}

.alert-md .alert-button-inner {
  justify-content: $alert-md-button-group-justify-content;
}
