@use "@infineon/design-system-tokens/dist/tokens";

.ifx {
  &__alert-wrapper {
    padding: 16px 48px 16px 24px;
    line-height: 20px;

    & .alert-heading {
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.75;
    }

  }

  &__alert-text {
    font-size: 13px;
    width: 100%;
    padding: 12px 48px 12px 12px;
    color: tokens.$color-text-black;
    @media (min-width: 576px) { 
      font-size: 16px;
    }
  }

  &__alert-highlighted {
    font-weight: bold;
  }
}

.alert {
  border: none;
  border-radius: 1px;
  max-width: 800px;
  padding: 0;
  display: flex;
}

.alert-dismissible .btn-close {
  padding: 0;
  width: 24px;
  height: 24px;
  background-size: 15px;
}



.alert p {
  font-size: 13px;
  line-height: 1.75;
}

.alert-primary,
.alert-secondary,
.alert-danger,
.alert-success,
.alert-warning,
.alert-color-gray-100 {
  color: tokens.$color-text-black;
  background-color: tokens.$color-bg-white;

  & .btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231D1D1D' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z'/%3E%3C/svg%3E");
    opacity: 1;
    top: 14px;
    right: 12px;

    &:focus {
      box-shadow: none;
    }

    &:focus-visible {
      box-shadow: 0 0 0 3px #B4DDD8;
    }
    
    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232D6357' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M315.3 411.3c-6.253 6.253-16.37 6.253-22.63 0L160 278.6l-132.7 132.7c-6.253 6.253-16.37 6.253-22.63 0c-6.253-6.253-6.253-16.37 0-22.63L137.4 256L4.69 123.3c-6.253-6.253-6.253-16.37 0-22.63c6.253-6.253 16.37-6.253 22.63 0L160 233.4l132.7-132.7c6.253-6.253 16.37-6.253 22.63 0c6.253 6.253 6.253 16.37 0 22.63L182.6 256l132.7 132.7C321.6 394.9 321.6 405.1 315.3 411.3z'/%3E%3C/svg%3E");
    }
  }
}

.alert-primary {
  border: 1px solid tokens.$color-default-500;
}

.alert-secondary {
  border: 1px solid tokens.$color-highlight-500;
}

.alert-success {
  border: 1px solid tokens.$color-success-500;
}

.alert-danger {
  border: 1px solid tokens.$color-danger-500;
}

.alert-warning {
  border: 1px solid tokens.$color-warning-500;
}

.alert-color-gray-100 {
  background-color: tokens.$color-gray-100;
}

.alert-link {
  color: inherit !important;
  font-weight: inherit;
}

.ifx__alert-icon-wrapper {
  position: relative;
  min-width: 48px;
  color: tokens.$color-text-white;
  padding: 14px 12px;
}

.alert-primary .ifx__alert-icon-wrapper {
  background-color: tokens.$color-default-500;
}

.alert-secondary .ifx__alert-icon-wrapper {
  background-color: tokens.$color-highlight-500;
}

.alert-success .ifx__alert-icon-wrapper {
  background-color: tokens.$color-success-500;
}

.alert-danger .ifx__alert-icon-wrapper {
  background-color: tokens.$color-danger-500;
}

.alert-warning .ifx__alert-icon-wrapper {
  background-color: tokens.$color-warning-500;
}

.alert-color-gray-100 .ifx__alert-icon-wrapper {
  background-color: tokens.$color-bg-darken;
}

.alert .ifx__alert-icon-wrapper .ifx__alert-icon {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
  height: 24px;
}