/*
 * containers
 */
.bordered,
.bordered-container,
.dashed,
.dashed-container {
  border: 1px solid var(--bordercolor-input, $pm-global-border);
}
.bordered-container,
.dashed-container {
  border-radius: $global-border-radius;
}
.bordered-container--error {
  border-color: $pm-global-warning;
}

.dashed,
.dashed-container {
  border-style: dashed;
}

.border-bottom {
  border-bottom: 1px solid var(--bordercolor-input, $pm-global-border);
}
.border-bottom--dashed {
  border-bottom-style: dashed;
}
.border-bottom--currentColor {
  border-bottom-color: currentColor;
}
.border-top {
  border-top: 1px solid var(--bordercolor-input, $pm-global-border);
}
.border-top--dashed {
  border-top-style: dashed;
}
.border-left {
  border-left: 1px solid var(--bordercolor-input, $pm-global-border);
}
.border-right {
  border-right: 1px solid var(--bordercolor-input, $pm-global-border);
}

.border-currentColor {
  border: 1px solid currentColor;
}

.borderColor-primary {
	border-color: $pm-primary;
}

.shadow-container {
  box-shadow: 0 0 20px 0 $input-shadow-color;
}

.tiny-shadow-container {
	box-shadow: 0 1px 3px 0 var(--bgcolor-main-area, $pm-global-border);
	border: 1px solid var(--bordercolor-input, transparent);
}

.row--orderable {
  z-index: 666; /* In case the modal is open */
  background: var(--bgcolor-main-area, $white);
  color: var(--color-main-area, $pm-global-grey);
}

$block-info-border-width: 3px !default;
[class*="block-info"] {
  padding: 0.5em 1.2em;
  color: var(--color-main-area, $pm-global-grey);
  background-color: var(--bordercolor-input, $pm-global-light);
  border-left-width: $block-info-border-width;
  border-left-style: solid;
}
@if $rtl-option == true {
  [dir="rtl"] {
    [class*="block-info"] {
      border-left-width: 0;
      border-right-width: $block-info-border-width;
      border-right-style: solid;
    }
  }
}
.block-info {
  border-color: $pm-primary;
}
.block-info-error {
  border-color: $pm-global-warning;
}
.block-info-warning {
  border-color: $pm-global-attention;
}
.block-info-success {
  border-color: $pm-global-success;
}

[class*="block-info-standard"] {
  padding: 0.2em 1.2em;
  background-color: transparent;
}
.block-info-standard {
  border-color: $pm-primary;
}
.block-info-standard-error {
  border-color: $pm-global-warning;
}
.block-info-standard-warning {
  border-color: $pm-global-attention;
}
.block-info-standard-success {
  border-color: $pm-global-success;
}
// other colors might be added later

[class*="block-info"].color-white {
  color: $white;
}

/**
 * details/summary
 */
details {
  border-bottom: 1px solid $pm-global-border;
  border-radius: $global-border-radius;

  & > summary::-webkit-details-marker {
    display: none;
  }
  &:first-child {
    border-top: 1px solid $pm-global-border;
  }
  &[open] > summary {
    background: url(#{$path-images}sprite-for-css-only.svg#css-caret-close) 0
      50% no-repeat;
  }
}
summary {
  padding: 1em 0 1em 2rem;
  background: url(#{$path-images}sprite-for-css-only.svg#css-caret) 0 50%
    no-repeat;
  list-style: none;
  border: 0;
  cursor: pointer;
}



/* welcome boxes in a 2 column design */
$breakpoint-2-columns: 1180 !default;
@include respond-to($breakpoint-2-columns) {
    .boxes-placeholder-container {
       flex-direction: column;
       > * {
           margin-bottom: 1em;
           width: 100%;
           flex-basis: auto;
       }
	}
	.boxes-placeholder-button {
		margin-top: 0;
	}
}