@import "~src/assets/styles/settings/_colors";

.odd-alert {
    .alert {
        font-style: normal;
        z-index: 999999;
        position: fixed;
        color: $grey;
        background-color: $primary;
        border-radius: 6px;
        transition: all 200ms;
        opacity: 0;
        margin: 10px auto;
        width: 400px;
        font-size: 14px;
        font-weight: 100;

        &.is-left {
            left: -100px;
            margin: 10px;
            top: 0;
        }

        &.is-right {
            right: -100px;
            margin: 10px;
            top: 0;
        }

        &.is-top {
            top: 0;
            left: 0;
            right: 0;
        }

        &.is-bottom {
            bottom: -100px;
            left: 0;
            right: 0;
        }

        &.is-active {
            opacity: 1;

            &.is-left {
                left: 0;
            }

            &.is-right {
                right: 0;
            }

            &.is-top {
                top: 0;
            }

            &.is-bottom {
                bottom: 0;
            }
        }

        .alert-info {
            color: $grey;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        .actions {
            color: $grey;
            padding: 10px 10px;

            .button {
                color: $grey;
                border: none;
                border-radius: 4px;
                background-color: transparent;

                &:hover {
                    color: $grey;
                }
            }
        }

        h3 {
            color: $grey;
            padding: 5px 10px 0;
            font-weight: bold;
            font-style: italic;

            button {
                &.delete {
                    right: 5px;
                    position: absolute;
                    background-color: transparent;

                    &:before,
                    &:after {
                        background-color: $grey;
                    }

                    &:before {
                        height: 1px;
                    }

                    &:after {
                        width: 1px;
                    }

                    &:hover {
                        &:before,
                        &:after {
                            background-color: $dark;
                        }
                    }
                }
            }
        }

        p {
            color: $grey;
            display: inline-block;
            padding: 10px 10px 5px;

            &.description {
                color: $dark;
                width: 100%;
                margin-top: 5px;
                padding: 5px 10px 10px;

                &.mb {
                    margin-bottom: 10px;
                }
            }
        }

        span {
            vertical-align: middle;
            margin: 0 10px 0 0;
        }

        &.is-primary {
            background-color: $primary-light;

            &.is-inverted {
                background-color: $white;
                border: 1px solid $primary;
                color: $primary;
            }

            .alert-info {
                background-color: $primary;
            }

            .description {
                background-color: $primary-light-white;
            }

            .actions {
                .button {
                    background-color: $primary;
                }
            }
        }

        &.is-success {
            background-color: $success-light;

            &.is-inverted {
                background-color: $white;
                border: 1px solid $success;
                color: $success;
            }

            .alert-info {
                background-color: $success;
            }

            .description {
                background-color: $success-light-white;
            }

            .actions {
                .button {
                    background-color: $success;
                }
            }
        }

        &.is-danger {
            color: $grey;
            background-color: $danger-light;

            p {
                color: $dark;
            }

            h3 {
                color: $dark;
            }

            &.is-inverted {
                background-color: $white;
                border: 1px solid $danger;
                color: $danger;
            }

            .alert-info {
                background-color: $danger;
            }

            .description {
                background-color: $danger-light-white;
            }

            .actions {
                .button {
                    background-color: $danger;
                }
            }
        }

        &.is-warning {
            background-color: $warning-light;
            color: $grey;

            &.is-inverted {
                background-color: $black;
                border: 1px solid $black;
                color: $warning;
            }

            .alert-info {
                background-color: $warning;
            }

            .description {
                background-color: $warning-light-white;
            }

            .actions {
                .button {
                    background-color: $warning;
                }
            }
        }

        &.is-info {
            background-color: $info-light;

            &.is-inverted {
                background-color: $white;
                border: 1px solid $blue;
                color: $blue;
            }

            .alert-info {
                background-color: $info;
            }

            .description {
                background-color: $info-light-white;
            }

            .actions {
                .button {
                    background-color: $info;
                }
            }
        }

        &.is-dark {
            background-color: $black;

            &.is-inverted {
                background-color: $white;
                border: 1px solid $black;
                color: $black;
            }

            .alert-info {
                background-color: #0b0b16;
            }

            .description {
                background-color: #142a3f;
            }

            .actions {
                .button {
                    background-color: $dark;
                }
            }
        }

        &.is-link {
            background-color: $secondary-light;

            &.is-inverted {
                background-color: $white;
                border: 1px solid $cyan;
                color: $cyan;
            }

            .alert-info {
                background-color: $secondary;
            }

            .description {
                background-color: $success-light-white;
            }

            .actions {
                .button {
                    background-color: $secondary;
                }
            }
        }
    }
}