.multifill-subtasks {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* By default tables fill the whole width. Way too big! */
.multifill-subtask table {
    width: auto;
}

.multifill-subtask-titlebar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    line-height: 1;

    .multifill-subtask-title {
        font-size: 1.1rem;
        font-weight: 300;
    }
}

/* By default we hide the links for showing and hiding feedback */
.multifill-link-show-detailed-feedback {
    display: none;
    font-size: 0.9rem;

    .multifill-failed:not(.multifill-show-detailed-feedback) & {
        display: inline;
    }
}
.multifill-link-hide-detailed-feedback {
    display: none;
    font-size: 0.9rem;

    .multifill-failed.multifill-show-detailed-feedback & {
        display: inline;
    }
}

/* Hide subtask feedback icons unless the subtask has a feedback class */
.multifill-subtask-icon-success {
    display: none;

    .multifill-success & {
        display: inline-block;
    }
}
.multifill-subtask-icon-failed {
    display: none;

    .multifill-failed & {
        display: inline-block;
    }
}

input.ntnu-inline-form-control[type="text"] {
    /* Stolen from the regular form-control css */
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .5rem;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 0;

    /* 9px per char seems good, plus 30 pixels of padding */
    &.ntnu-ifc-10char {
        width: 120px;
    }

    &.ntnu-ifc-20char {
        width: 210px;
    }

    &.ntnu-ifc-30char {
        width: 300px;
    }

    &.ntnu-ifc-40char {
        width: 390px;
    }

    &.ntnu-ifc-50char {
        width: 480px;
    }

    &.ntnu-ifc-long {
        width: 100%;
    }

    .multifill-show-detailed-feedback &.multifill-success {
        background-color: #d1ffbd;
    }

    .multifill-show-detailed-feedback &.multifill-failed {
        background-color: #FFCCCB;
    }
}

.ntnu-inline-form-check-input {
    display: inline !important; /* Override INGInious css */

    /* Only display the feedback  */
    .multifill-show-detailed-feedback &:has(.multifill-success)::after {
        display: inline-block;
        content: "";
        margin-left: 2px;
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        background-repeat: no-repeat;
        background-image: url("/plugins/ntnu_inginious_multifill/static/icons/subtask_success.svg");
    }

    .multifill-show-detailed-feedback &:has(.multifill-failed)::after {
        display: inline-block;
        content: "";
        margin-left: 2px;
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        background-repeat: no-repeat;
        background-image: url("/plugins/ntnu_inginious_multifill/static/icons/subtask_failed.svg");
    }
}

/* These spans are used to "sneak" data into the feedback text */
span.multifill-subtasks-success {
    display: none;
}

span.multifill-subtasks-failed {
    display: none;
}