/*!
 * Copyright 2018-2024 adorsys GmbH & Co KG
 *
 * This program 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, either version 3 of the License, or (at
 * your option) any later version. This program 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 https://www.gnu.org/licenses/.
 *
 * This project is also available under a separate commercial license. You can
 * contact us at sales@adorsys.com.
 */

@import '@angular/cdk/overlay';
// @include cdk-overlay();

$close-button-size: 26px;
$close-button-offset: calc((#{$close-button-size} / 2) * -1);

.feedback-message-container {
  display: inline-flex;
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
  padding: 18px 24px;
  align-items: center;
  min-width: 300px;
  box-sizing: border-box;
  z-index: 1020 !important;

  .message {
    letter-spacing: 0.0625rem;
    font-size: 0.8rem;
  }

  .close-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: $close-button-offset;
    right: $close-button-offset;
    cursor: pointer;
    background: white;
    border-radius: 50%;
    border: none;
    margin: 0;
    padding: 0;
    width: $close-button-size;
    height: $close-button-size;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    i {
      font-size: 16px;
    }
  }

  &.info {
    background-color: white;

    .message {
      color: black;
    }

    .close-button {
      background-color: #40445a;
      color: white;
    }
  }

  &.warn {
    background-color: #ff6f00;

    .message {
      color: white;
    }

    .close-button {
      color: #ff6f00;
    }
  }

  &.error {
    background-color: #b71c1c;

    .message {
      color: white;
    }

    .close-button {
      color: #b71c1c;
    }
  }
}
