// Licensed to Cloudera, Inc. under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  Cloudera, Inc. licenses this file
// to you under the Apache License, Version 2.0 (the
// 'License'); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an 'AS IS' BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import '../../components/styles/variables';

.hue-alert {
  position: fixed;
  width: 30%;
  z-index: 9999;
  top: 7px;
  right: 0;
  margin-right: 24px;
  display: flex;
  flex-flow: column;
  row-gap: 10px;

  .ant-alert {
    padding-right: 12px;

    .ant-alert-description {
      display: inline;
    }
  }

  button:hover,
  button:focus {
    background-color: unset;
  }

  button span {
    font-size: $font-size-sm;
  }

  button svg.cdp-icon-close {
    height: 16px;
  }

  .hue-alert--warning {
    color: $fluidx-orange-900;
    background: $fluidx-orange-050;
    border: 1px solid $fluidx-orange-500;

    button {
      color: $fluidx-green-800;
    }
  }

  .hue-alert--success {
    color: $fluidx-green-900;
    background: $fluidx-green-050;
    border: 1px solid $fluidx-green-600;

    button {
      color: $fluidx-green-800;
    }
  }

  .hue-alert--error {
    color: $fluidx-orange-900;
    background: $fluidx-red-050;
    border: 1px solid $fluidx-red-500;
    display: flex;
    align-items: flex-start;

    button {
      color: $fluidx-red-800;
      position: absolute;
      top: 0.5rem;
      right: 3%;
    }
  }

  .hue-alert--message {
    margin-right: 1rem;
  }
}