// messages

.alert-fixed-top {
  top: 0;
  @include position(fixed, $top: 0, $left: 0, $width: 100%, $height: auto);
  border: none;
  min-height: 100px;
  z-index: 9999;

  p,
  p * {
    line-height: 22px;
    font-size: 15px;
    margin: 0;

    a,
    a * {
      color: $primary !important;
      display: block;
    }
  }

  .ico-close {
    border: none;
    @include position(absolute, $right: 40px);
    @include transition(all 0.3s ease);
  }

  @media (max-width: $medium) {
    min-height: 110px;

    p,
    p * {
      font-size: 13px;
      margin: 0;
      line-height: 16px;
    }

    .ico-close {
      right: 20px;
    }
  }
}

.alert {
  border: none;
  padding: 30px;

  h4,
  h4 * {
    font-size: 18px;

    a,
    a * {
      color: $blue;
    }
  }

  p,
  p small {
    font-size: 13px;
    margin: 0;

    a,
    a * {
      color: $primary !important;
      display: block;

      &.btn {
        color: white !important;
        margin: 30px auto;
      }
    }
  }
}

// Danger
.alert-danger {
  background: lighten($error, 40%);

  h3,
  h3 *,
  p,
  p * {
    color: $error;
  }

  .ico-close {
    background: $error;

    &:hover,
    &:focus {
      background: darken($error, 20%);
    }
  }
}

// Info
.alert-info {
  background: lighten($info, 50%);

  h3,
  h3 *,
  p,
  p * {
    color: $info;
  }

  .ico-close {
    background: $info;

    &:hover,
    &:focus {
      background: darken($info, 20%);
    }
  }
}

// Success
.alert-success {
  background: lighten($succes, 65%);

  h3,
  h3 *,
  p,
  p * {
    color: $succes;
  }

  .ico-close {
    background: $succes;

    &:hover,
    &:focus {
      background: darken($succes, 20%);
    }
  }
}

// Función empezada
.alert-funcion {
  background: white;
  border: 3px solid $orange;
  padding: 0.5rem;

  p {
    display: flex;
    justify-content: center;
    color: $black;
    font-size: 16px;
    font-weight: $font-bold;
    vertical-align: middle;
    line-height: 38px;
    margin: 0;

    &::before {
      content: " ";
      display: block;
      width: 38px;
      height: 38px;
      background-size: contain;
      background: url(../assets/svg/ico-warning.svg) no-repeat center center transparent;
      vertical-align: middle;
      margin-right: 0.75rem;
    }
  }
}

// Alert Cookie
.alert-cookie {
  .alert {
    padding: 20px 30px;
    min-height: 65px !important;
  }
}

// Tags
.compra-expired {
  .tag {
    background: #e9e9e9;
  }
}
.compra-warning {
  .tag {
    background: #ffa200;
    color: white;
  }
}
.compra-success {
  .tag {
    background: #20b788;
    color: white;
  }
}
.listado-historial {
  .tag {
    background: #e8e8e8 !important;
    color: #000000 !important;
  }
}

// Proximamente
.box-blue {
  i {
    font-size: 48px;
  }
  h3,
  h4,
  p {
    color: #0078db !important;
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    letter-spacing: 0.3px;
    strong {
      color: #0078db;
      font-size: 24px;
      font-weight: 700;
      margin: 0;
    }
  }
  @media (max-width: $medium) {
    i {
      font-size: 38px;
      margin-right: 1rem !important;
    }
    h3 {
      font-size: 18px;
      strong {
        font-size: 18px;
      }
    }
  }
}