@import "../../../../../styles/my-career-styles/variables";

.profile-option-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10% 0;
}

.profile-option {
    border: 2px solid $greyBorder;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 250px;
    flex-direction: column;
    transition: .3s;
    border-radius: 8px;

    &.selected {
        box-shadow: 0 0 18px 0 rgba(18, 168, 222, 0.6);
        border-color: $primaryColor;
        background: $primaryColor;
        color: $white;

        .mc-btn-secondary {
            border-color: $white;
            background: $primaryColor !important;
            color: $white !important;
        }
    }

    &:hover {
        box-shadow: 0 0 18px 0 rgba(229, 232, 235, 0.6);
    }
}

.profile-actions {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1024px) {
    .profile-actions {
        flex-direction: column;
        justify-content: center;
        text-align: center;

        .mc-btn-primary  {
            margin: 20px auto;
        }
    }
}
