@import './variables';

.s-alert {
  display: block;
  font-size: $alert-font-size;
  margin-bottom: $alert-margin;
  padding: $alert-padding;
  position: relative;
  color: var(--theme-text-primary);

  @include has-theme-bg {
    color: map-deep-get($material-dark-theme, 'text', 'primary');
  }

  .s-icon,
  .s-btn {
    color: inherit !important;
  }

  .s-icon {
    align-self: flex-start;
  }

  [slot='icon'] {
    margin-right: $spacer * 4;
  }

  .s-alert__border {
    border-style: solid;
    border-width: $alert-border-width;
    content: '';
    position: absolute;

    &.border-left,
    &.border-right {
      bottom: 0;
      top: 0;
    }

    &.border-bottom,
    &.border-top {
      left: 0;
      right: 0;
    }

    &.border-left {
      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;
      left: 0;
    }

    &.border-right {
      border-top-right-radius: inherit;
      border-bottom-right-radius: inherit;
      right: 0;
    }

    &.border-top {
      border-top-left-radius: inherit;
      border-top-right-radius: inherit;
      top: 0;
    }

    &.border-bottom {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
      bottom: 0;
    }
  }

  &.dense {
    padding-top: $alert-padding / 2;
    padding-bottom: $alert-padding / 2;

    .s-alert__border {
      border-width: $alert-dense-border-width;
    }
  }

  &.outlined {
    background: transparent;
    border: $alert-outline;
  }

  &.text {
    background: transparent !important;

    &::before {
      background-color: currentColor;
      border-radius: inherit;
      bottom: 0;
      content: '';
      left: 0;
      opacity: 0.12;
      position: absolute;
      pointer-events: none;
      right: 0;
      top: 0;
    }
  }

  &:not(.tile) {
    border-radius: $alert-border-radius;
  }

  &.colored-border {
    @include elevation(2);
  }

  &:not(.colored-border) {
    .s-alert__border {
      opacity: $alert-border-opacity;
    }
  }
}

.s-alert__wrapper {
  align-items: center;
  border-radius: inherit;
  display: flex;
}

.s-alert__content {
  flex: 1 1 auto;
}