// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:math';

.#{$prefix}-alert {
  background-color: $color-black-000;
  border-left: $spacing-xxs solid $color-black-500;
  padding: $spacing-sm;
  position: relative;

  &__title {
    font-weight: $font-weight-bold;
    font-size: $ts-18;

    /**
     * We'll put bottom margin on the title here so that the .alert can
     * be used with the __message only and still get the proper padding
     * around all sides.
     */
    margin-bottom: $spacing-xxs;

    /**
     * Add a little padding on the right so that the title won't end up
     * showing underneath the "X" button if it's used.
     */
    padding-right: $spacing-md;
  }

  &__message {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $ts-14;
    padding-right: $spacing-md;
  }

  &__dismiss {
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-radius: $spacing-xxs;
    color: $color-black-base;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: $spacing-sm;
    right: $spacing-sm;
    width: $spacing-md;
    height: $spacing-md;

    &:hover {
      background-color: rgb(0 0 0 / .15);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-blue-400 !important;
    }
  }
}

/**
 * Alert modifiers
 *
 * NOTE: Old un-prefixed versions should be removed in the next major
 * version of Rivet.
 *
 * The ".alert-message" and "alert--error" class names should also be removed
 * in favor on the newer unified alert/feedback naming conventions.
 */

.#{$prefix}-alert--info {
  background-color: $color-blue-000;
  border-left-color: $color-blue-500;
  color: $color-blue-700;
}

.#{$prefix}-alert--info .#{$prefix}-alert__dismiss {
  color: $color-blue-700;
}

.#{$prefix}-alert--success {
  background-color: $color-green-000;
  border-left-color: $color-green-500;
  color: $color-green-700;
}

.#{$prefix}-alert--success .#{$prefix}-alert__dismiss {
  color: $color-green-700;
}

.#{$prefix}-alert--warning {
  background-color: $color-gold-000;
  border-left-color: $color-gold-500;
  color: $color-gold-700;
}

.#{$prefix}-alert--warning .#{$prefix}-alert__dismiss {
  color: $color-gold-700;
}

.#{$prefix}-alert--danger {
  background-color: $color-orange-000;
  border-left-color: $color-orange-500;
  color: $color-orange-700;
}

.#{$prefix}-alert--danger .#{$prefix}-alert__dismiss {
  color: $color-orange-700;
}

/**
 * Alert lists
 */

.#{$prefix}-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;

  &__item {
    line-height: $line-height-base;
  }

  &__item:not(first-child) {
    margin-top: $spacing-xs;
  }
}

.#{$prefix}-input-error > {
  input[type='color'],
  input[type='color']:focus,
  input[type='date'],
  input[type='date']:focus,
  input[type='datetime'],
  input[type='datetime']:focus,
  input[type='datetime-local'],
  input[type='datetime-local']:focus,
  input[type='email'],
  input[type='email']:focus,
  input[type='month'],
  input[type='month']:focus,
  input[type='number'],
  input[type='number']:focus,
  input[type='password'],
  input[type='password']:focus,
  input[type='search'],
  input[type='search']:focus,
  input[type='tel'],
  input[type='tel']:focus,
  input[type='text'],
  input[type='text']:focus,
  input[type='time'],
  input[type='time']:focus,
  input[type='url'],
  input[type='url']:focus,
  input[type='week'],
  input[type='week']:focus,
  textarea,
  select {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-orange-500;
    border-color: $color-orange-500;
  }
}