/* grey sketches of a panel while the real one is on the way (issue-3318):
   the board's company panel and the open job on the company's jobs tab */

.skel {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef1f5 30%, #f7f9fb 50%, #eef1f5 70%) #eef1f5;
    background-size: 300% 100%;
    animation: skel-shimmer 1.4s linear infinite;
}

@keyframes skel-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skel {
        animation: none;
    }
}

.skel--title {
    height: 16px;
    width: 45%;
}

.skel--short {
    width: 30%;
}

.skel--half {
    width: 70%;
}

/* --- the board: the company panel, same cards and heights as the real one --- */

/* main.css centres a gif in a white flex row */
.jobboard-company-loading.active {
    display: block;
    padding: 0;
    background: none;
}

.skel-card {
    min-height: 116px;
    margin: 0 3px 16px;
    padding: 12px 15px 25px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    align-content: start;
}

.skel-card > .skel--title {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.skel-card--company {
    min-height: 137px;
    padding-top: 14px;
    grid-template-columns: 60px 1fr 54px;
    gap: 10px 8px;
}

.skel-card--company > .skel:first-child {
    height: 43px;
    grid-row: span 2;
}

.skel-card--company > .skel--title {
    grid-column: auto;
    width: 60%;
    margin: 4px 0 0;
}

.skel-card--company > .skel:last-child {
    height: 29px;
    grid-column: 3;
    grid-row: 1 / span 2;
}

/* --- the jobs tab: the open job --- */

.skel-job {
    position: sticky;
    top: 76px;
    padding: 19px 21px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 5px;
}

.skel-job > * + * {
    margin-top: 16px;
}

.skel-job > .skel--title {
    height: 24px;
    width: 65%;
}

.skel-job__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.skel-job__row > .skel {
    flex: 0 0 90px;
}

.skel-job__row > .skel--button {
    flex-basis: 127px;
    height: 42px;
}

.skel-job__row > .skel--tag {
    flex-basis: 64px;
    height: 24px;
    border-radius: 12px;
}

.skel-job__row > .skel--half {
    flex-basis: 220px;
}

.skel-job__body {
    margin: 22px -21px 0;
    display: block;
    padding: 22px 21px 4px;
    border-top: 1px solid #eef1f5;
}

.skel-job__body > .skel + .skel {
    margin-top: 12px;
}

.skel-job__body > .skel:nth-child(even) {
    width: 92%;
}

.skel-job__body > .skel:last-child {
    width: 55%;
}