.modal__page#job-alerts {
  .job_alert__header {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 1rem;
    position: sticky;
    top: 0;
    padding-top: 2rem;
    z-index: 1;

    .header__actions {
        align-items: flex-end;
        gap: 0.5rem;
    }

    .header__section{
        align-items: center;
        gap: 0.5rem;
        display:flex;
    }
    .header__row{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
  }
}

.job_alert_preview{
    border: 1px solid var(--light-gray);
    padding: 1rem;
    margin-bottom: 1rem;
}

.job_alerts__empty{
    margin-top: 2rem;
    justify-content: center;
    display:flex;
    color: var(--ink-gray);
}

.job_alerts__days_section{
    flex-direction: row;
    gap: 0.5rem;
    .job_alert__day{
        border: 1px solid var(--light-gray);
        padding: 0.2rem;
        box-shadow: 1px 1px 4px rgba(238, 238, 238, 0.75);
        min-width: 3rem;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: var(--border-radius);

        &.selected-true{
            --highlight-color-light: color-mix(in srgb, var(--display-select-color), transparent 90%);
            --highlight-color-dark: var(--display-select-color);
            background-clip: padding-box;
            background: var(--blue-background-grad);
            color: var(--lightest-gray)
        }
    }
}