@layer theme {

    .jobAlert {
        .container {
            background-color: transparent;
            .inner {
                .themeColor3 & {
                    background-color: var(--color1);
                }
                .themeColor4 & {
                    border: 2px solid var(--color-light);
                }
                border-radius: var(--border-radius);
                padding: calc(var(--padding) * 2);
                @media (max-width: 56em) {
                    padding: var(--padding) calc(var(--padding) / 2);
                }
                @media (--max-fablet) {
                    padding: var(--padding) calc(var(--padding) / 2);
                }
                
                .form {
                    legend, h2 {
                        &.title {
                            font-size: var(--s-fontsize);
                            line-height: var(--s-lineheight);
                            font-weight: 400;
                        }
                    }
                    form {
                        display: flex;
                        flex-direction: column;
                        gap: var(--padding);
                        padding-top: var(--padding);
                        input[type="email"] {
                            @media (min-width: 56em) {
                                width: calc(50% - (var(--gutter) / 2));
                            }
                            @media (--min-fablet) {
                                width: calc(50% - (var(--gutter) / 2));
                            }
                            appearance: base-select;
                            align-items: center;
                            font-size: var(--xs-fontsize);
                            border: 0;
                            border-radius: 20px;
                            &::placeholder {
                                color: var(--form-placeholder);
                            }
                        }
                        .frequency {
                            display: flex;
                            flex-direction: column;
                            gap: calc(var(--padding) / 2);
                            margin-top: var(--gutter);
                            label {
                                display: flex;
                                align-items: center;
                                font-size: var(--xs-fontsize);
                                line-height: 1;
                                cursor: pointer;
                            }
                            .items {
                                display: flex;
                                flex-direction: row;
                                gap: var(--padding);
                            }
                            .small {
                                font-size: calc(var(--xs-fontsize) - 0.2rem);
                                line-height: var(--xs-lineheight);
                                font-weight: 400;
                            }
                        }
                    }
                    button.tag {
                        color: var(--color-dark);
                        background-color: var(--color-light);
                        padding: 15px 24px;
                        border-radius: var(--button-radius);
                        justify-content: space-between;
                        gap: calc(var(--padding) / 2);
                        .icon {
                            opacity: 1;
                            width: 12px;
                            height: 12px;
                            margin-right: 0;
                        }
                    }
                    .wrap {
                        display: flex;
                        flex-wrap: wrap;
                        gap: var(--gutter);
                        flex-direction: column;
                        @media (min-width: 56em) {
                            flex-direction: row;
                            .formGroup {
                                width: calc(50% - (var(--gutter) / 2));
                            }
                        }
                        @media (--min-fablet) {
                            flex-direction: row;
                            .formGroup {
                                width: calc(50% - (var(--gutter) / 2));
                            }
                        }
                    }
                    fieldset {
                        gap: calc(var(--gutter) / 2);
                        legend {
                            font-size: var(--xs-fontsize);
                            line-height: var(--xs-lineheight);
                            font-weight: 600;
                        }
                        select {
                            color: var(--form-placeholder);
                        }
                        &.nested {
                            padding: var(--padding) 0;
                            border: 2px solid var(--color-dark);
                            border-right: none;
                            border-left: none;
                            .select {
                                @media (min-width: 56em) {
                                    width: calc(50% - (var(--gutter) / 2));
                                }
                                @media (--min-fablet) {
                                    width: calc(50% - (var(--gutter) / 2));
                                }
                            }
                        }
                        &.search {
                            label {
                                border-radius: var(--circle-radius);
                                border: 2px solid var(--color-dark);
                                padding: 8px 10px;
                                input {
                                    background: none;
                                    border: 0;
                                    outline: none;
                                    flex: 1;
                                    &::placeholder {
                                        color: var(--form-placeholder);
                                    }
                                }
                                button {
                                    position: relative;
                                    top: auto;
                                    right: auto;
                                    transform: none;

                                    width: 56px;
                                    height: 56px;
                                    border-radius: 100%;
                                    background: var(--color2);
                                    color: var(--color-dark);

                                    justify-content: center;
                                    align-items: center;
                                    display: flex;
                                    svg {width: 20px;}
                                }
                            }
                        }
                    }
                    .success {
                        display: flex;
                        flex-direction: column;
                        gap: var(--padding);
                        .content {
                            margin-top: var(--gutter);
                        }
                    }
                }
            }
        }
    }
}