.notifo {
    &-loader {
        @include middle;

        img {
            display: inline-block;
        }
    }

    &-link {
        color: $color-link;

        &:hover {
            opacity: .95;
            text-decoration: underline;
            text-transform: none;
        }
    }

    &-tabs {
        border-bottom: 1px solid $color-border;
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        margin-bottom: 1.5rem;

        &-content {
            min-height: 8rem;
        }

        li {
            border-bottom: 3px solid transparent;
            cursor: pointer;
            margin: 0;
            margin-right: 1.5rem;
            padding: .5rem 0;
            transition: .3s ease border;

            &.active {
                border-bottom-color: $color-link;
            }

            &:hover {
                border-bottom-color: color-mix(in srgb, $color-link 70%, black);
            }
        }
    }

    &-text {
        font-size: $font-size-sm;
    }

    &-form {
        &-group {
            margin-top: .75rem;
        }

        &-label {
            font-size: $font-size-ssm;
            font-weight: 500;
            opacity: .75;
        }

        &-control,
        &-button {
            background: $color-background;
            border: 1px solid $color-input;
            border-radius: 3px;
            font-size: $font-size-sm;
            font-weight: normal;
            padding: .5rem .75rem;
        }

        &-control {
            transition: border-color .5s ease;
            width: 100%;

            &:hover {
                border-color: $color-link;
            }

            &:focus {
                border-color: $color-link;
            }
        }

        &-button {
            margin: 0;
            margin-right: .5rem;
            transition: background-color .5s ease;

            &:hover {
                background: $color-border;
            }

            &:focus {
                background: $color-border;
            }

            &.primary {
                background: $color-link;
                border-color: $color-link;
                color: $color-background;

                &:hover {
                    background: $color-link;
                }

                &:focus {
                    background: $color-link;
                }
            }
        }

        &-toggle {
            @include size($size-toggle * 2, $size-toggle);
            @include middle;
            appearance: none;
            background: $color-border;
            border: $color-border;
            border-radius: $size-toggle;
            box-shadow: inset 0 .5px 1px $color-shadow;
            padding-left: 2px;
            padding-top: 2px;
            position: relative;
            transition: background-color .3s ease;

            &::before {
                @include size($size-toggle - 4px, $size-toggle - 4px);
                @include absolute(2px, null, null, 2px);
                background: $color-background;
                border: 0;
                border-radius: $size-toggle;
                box-shadow: 0 2px 2px $color-shadow;
                content: '';
                transition: transform .3s ease;
            }

            &:checked {
                background: $color-success;

                &::before {
                    transform: translateX($size-toggle);
                }
            }

            &.checked,
            &:checked {
                background: $color-success;

                &::before {
                    transform: translateX($size-toggle);
                }
            }

            &.unchecked {
                background: $color-error;

                &::before {
                    transform: translateX(0);
                }
            }

            &.indeterminate {
                &::before {
                    transform: translateX($size-toggle * .5);
                }
            }

            &-label {
                @include middle;
                font-size: $font-size-sm;
                font-weight: normal;
                margin-left: .5rem;
            }
        }
    }

    &-list {
        &-empty {
            @include absolute(7rem, 0, null, 0);
            color: $color-empty;
            font-size: $font-size-ssm;
            font-weight: normal;
            text-align: center;
        }

        &-loading {
            @include absolute(.5rem, .5rem, null, null);
            color: $color-empty;
            font-size: $font-size-ssm;
            font-weight: normal;
        }
    }

    &-error {
        background-color: $color-error;
        border: 0;
        border-radius: 5px;
        color: white;
        font-size: $font-size-sm;
        font-weight: normal;
        margin-bottom: 1rem;
        padding: .5rem 1rem;
    }
}

input {
    &.notifo-form-toggle {
        background: $color-error;
    }
}