@use "placeholders";
@use "variables";

.form {
    margin: auto;
    width: 90%;

    & form {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & input,
        & textarea {
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
            font-size: clamp(0.9rem, 0.925rem + 0.375vw, 1.375rem);
            margin-bottom: 1rem;
            width: 100%;

            &[type='checkbox'] {
                width: auto;
                margin-bottom: 2rem;
            }
        }

        & button[type='submit'] {
            padding: 0.75rem;
            margin-bottom: 1rem;

            @extend %button;
        }

        & li[id^='_error'],
        li[id*='_error'],
        .error-message {
            color: red;
            text-align: end;
        }
    }

    .team__card {

        @media screen and (min-width: variables.$breakpoint) {
            width: 30%;
            margin: auto;
        }
    }
}

.subsection-border {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    padding-right: 5rem;
}

.resources__visuals.subsection-border {
    width: 100%;
}

.resources__images__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.element-to-move {
    position: relative;

    &:nth-child(1 of .element-to-move) {

        & .upButton {
            display: none;
        }

        & .leftButton {
            display: none;
        }
    }

    &:nth-last-child(1 of .element-to-move) {

        & .downButton {
            display: none;
        }

        & .rightButton {
            display: none;
        }
    }
}

.position-button {

    width: 2.5rem;
    height: 2.5rem;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    & svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    position: absolute;
    right: 1rem;

    @extend %button;
}

.upButton {
    top: 1rem;
}

.downButton {
    bottom: 1rem;
}

.leftButton {
    left: 1rem;
}

.rightButton {
    right: 1rem;
}

.delete__button,
.update__button {
    @extend %button;
    padding: 0.5rem 1rem;
    width: fit-content;
}

.team__card__container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.modify__buttons {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.reorder {
    @extend %button;
    padding: 0.75rem;
    width: fit-content;
    margin: auto;
}

#galleryImage {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    // border: #ccc 1px solid;
    border-radius: 0.5rem;
    padding: 1rem;
    justify-content: center;
    gap: 1rem;

    & input[type="radio"] {
        display: none;
        /* Masque les boutons radio */
    }

    & label {
        display: flex;
        flex-direction: column;
    }

    & label p {
        height: 32px;
        /* Aligner les images avec le placeholder */
    }

    & label img {
        cursor: pointer;
        /* Ajoute un curseur pour indiquer que l'image est cliquable */
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
        max-width: 200px;
    }

    & label img:hover {
        border: 3px solid #d76942;
        /* Ajoute un effet au survol */
        padding: 2px;
    }

    & input[type="radio"]:checked+label img {
        border: 3px solid #d76942;
        /* Ajoute une bordure pour l'image sélectionnée */
        padding: 2px;
    }
}

.form-label-with-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & label {
        margin-bottom: 0;
    }

    & span {
        font-size: 1.5rem;
        font-weight: bold;
        color: rgb(0, 0, 141);
    }
}

.help-tooltip {
    cursor: help;
    font-size: 1rem;
}

.pdf-thumbnail {
    width: 10rem;
}

.admin-title {
    display: flex;
    align-items: center;
    gap: .75rem;

    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 600;

    &:first-child {
        margin-top: 2rem;
    }
}

.admin-title::before {
    content: "";
    width: .35rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #d76942;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.video__item {
    margin-bottom: 1rem;
}

#gallery_image_category,
#team_role {
    padding: 0.5rem;
    font-size: clamp(0.9rem, 0.925rem + 0.375vw, 1.375rem);
    font-family: "Calibri", "Source Sans 3", sans-serif;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background-color: #fff;
    margin-left: 1rem;
}

.gallery-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0;
}

.gallery-category {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: 9999px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    font-weight: 500;

    &--position-buttons {
        padding-bottom: 4rem;

        & .position-button {
            top: auto;
            margin-top: .5rem;
        }
    }

    &__delete {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 1.3rem;
        height: 1.3rem;

        border-radius: 50%;

        text-decoration: none;
        color: #666;
        line-height: 1;

        &-button {
            border-radius: 50%;
            transition: background .2s, color .2s;

            &:hover,
            &:focus {
                background: #d32f2f;
                color: white;
            }
        }
    }
}

#team-error,
#rubricInfo-error,
#section-error,
#contact,
#action-error,
#carousel-error,
#reports,
#image-error,
#imageCategories,
#video-error,
#visual-error,
#team-error,
#erreurs,
#visuals-anchor,
#homeSections,
#reports-anchor,
#resourcesSections,
#legalSections {
    scroll-margin-top: 6rem;
}