@import url("https://amnesty-frontend.pages.dev/paperform/style.css");

:root {
	--base-font: "Trade Gothic";
	--c-black: #222222;
	--c-disabled: rgba(34, 34, 34, 0.05);
	--c-gray: #B3B3B3;
	--c-white: #FFFFFF;
	--c-sage: #F2F2E6;
	--c-error: #CC0000;
	--border-radius: 8px;

	--input-height: 48px;

	--font-size-l: 16px;
	--font-size-m: 14px;
	--font-size-s: 12px;

	--space-xl: 24px;
	--space-l: 16px;
	--space-m: 12px;
	--space-s: 10px;
	--space-xs: 8px;
}

/* EDITOR */
.editor.editor--live {
    padding: 0;
}

/* CONTAINER */
.LiveField__container {
	padding: var(--space-xl) 0 0 0 !important;
	display: flex;
	flex-direction: column;
}

.LiveFieldSection__row .LiveField__container {
    flex: 0 1 auto;
}


/* HEADER */
.LiveField__header {
	font-family: var(--base-font);
	font-size: var(--font-size-m);
	padding-block-end: var(--space-xs);
}



/* DESCRIPTION */
.LiveField__description {
	font-family: var(--base-font);
	font-size: var(--font-size-m);
	color: var(--c-gray);
	margin-black-start: 0;
	line-height: 130%;
	order: 1;
}



/* ANSWER */
.LiveField__answer {
	margin-top: 0;
	font-family: var(--base-font);
	font-size: var(--font-size-l);
	&
}


/* INPUTS */
.LiveField__answer {
    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        font-size: var(--font-size-l);
	    border: 1px solid var(--c-gray); /* maybe change to var(--c-black)*/
	    border-radius: var(--border-radius);
	    padding: var(--space-l);
	    height: var(--input-height);
	    &:focus {
		    border: 1px solid var(--c-black);
	    }

	    &::placeholder {
		    color: var(--c-gray);
	    }
    }
    /*input[value=""]:not(:focus) {
        border-color: var(--c-gray);
    }*/
    /* Textarea */
    textarea.LiveField__input {
        font-size: var(--font-size-l);
        border: 1px solid var(--c-gray) !important;
        border-radius: var(--border-radius);
        padding: var(--space-l) !important;
        min-height: 5lh;
        max-height: 10lh;
        field-sizing: content;
        &:focus {
    	    border: 1px solid var(--c-black) !important;
        }
    
        &::placeholder {
    	    color: var(--c-gray);
        }
    }
}

/* SELECT */
.Select.Select--single {
  border: 1px solid var(--c-gray) !important;
	border-radius: var(--border-radius);
	height: var(--input-height);  
}
Select.LiveField__input.is-focused.is-open.Select--single {
	border: 1px solid red;
}

.Select-control {
    padding: 0;
    min-height: var(--input-height);
	background-color: transparent;
	&:hover {
		box-shadow: none;
	}
}

.LiveField__answer .Select-placeholder {
	font-family: var(--base-font);
	color: var(--c-gray);
	height: var(--input-height);
}

.is-open > .Select-control {
	border-radius: inherit;
	background-color: transparent;
}

.Select-value-label {
	font-family: var(--base-font);
}

.Select--single {
    color: var(--c-black);
}

.Select-menu-outer {
    box-shadow: none;
    border: 1px solid var(--c-gray);
}

.Select-option {
    background-color: var(--c-white);
    &:hover {
        background-color: var(--c-sage);
    }
    &.is-focused {
        background-color: var(--c-sage);
    }
    &.is-selected {
        background-color: var(--c-sage);
    }
}
.Select-input {
    padding-left: var(--space-m);
}

.Select-placeholder {
    transform: translateY(-1px);
}

/* CHECKBOX */
.LiveField--choices.LiveField--multiline {
	    margin-block-start: var(--space-xl);
	.LiveField__header {
	    line-height: 130%;
	    font-size: var(--font-size-l);
		color: var(--c-gray);
	}
}

.Choices__choice {
    height: var(--input-height);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    
}

.Choices__choice {
    
    &.btn-default.btn-raised {
        border-radius: var(--border-radius);
    }
    &.btn-raised {
        box-shadow: none;
        border-radius: var(--border-radius);
    }
    /*&[aria-checked="false"] {
        background-color: transparent;
        border: 1px solid var(--c-gray);
    }
     &[aria-checked="true"] {
        background-color: none;
        border: 1px solid var(--c-black);
    }*/
}

.Choices__choice[aria-checked="false"] {
    &.btn-raised.btn-default {
        background-color: transparent;
        color: var(--c-black);
        border: 1px solid var(--c-gray);
    }
    & .Choices__label {
        color: var(--c-gray);
    }
}

.Choices__choice[aria-checked="true"] {
    &.btn-raised.btn-primary {
        background-color: transparent;
        color: var(--c-black);
        border: 1px solid var(--c-black);
    }
    & .Choices__label {
        color: var(--c-black);
    }
}

.Choices .Choices__choice .material-icons {
    font-size: var(--font-size-l);
    opacity: 1;
}

.ChoicesQuestion.Choices .Choices__choice .material-icons {
    padding-top: 2px;
}

/* ASTERIKS */
.LiveField--required {
	& ::after {
		color: var(--c-gray);
		margin-inline-start: 2px;
	}
}

/* BUTTONS */
.submit .btn-raised.btn-primary {
	font-family: var(--base-font);
	font-weight: 700 !important;
	width: max-content;
	padding: var(--space-m) 22px;
    border: 1px solid var(--c-black);
    &:hover {
        box-shadow: none;
        background-color: var(--c-white);
        color: var(--c-black);
    }
}

.btn-raised {
    box-shadow: none;
}

/* ADDRESS */
.Address__input {
    label {
        padding-block-end: var(--space-xs);
    }
    label, input {
        font-family: var(--base-font);
    }
    select {
        border: 1px solid var(--c-gray) !important;
	    border-radius: var(--border-radius);
	    height: var(--input-height); 
	    padding-inline: var(--space-l);
    }
}

/* FILE UPLOAD */
.File {
    .btn-raised.btn-default {
        border: 1px solid var(--c-gray);
        border-radius: var(--border-radius);
        background-color: var(--c-disabled);
        text-transform: none;
        &:hover {
            box-shadow: none;
        }
    }
}

/* YES / NO */
.YesNo {
    display: flex;
    flex-direction: row;
    gap: calc(var(--space-xs) / 2);
    .YesNo__button {
        border: 1px solid var(--c-gray);
        border-radius: var(--border-radius);
        height: var(--input-height);
        display: flex;
        align-items: center;
	    padding: var(--space-l);
    }
    .YesNo__button:hover {
        box-shadow: none;
        border-color: var(--c-black);
    }
    .YesNo__button[aria-checked="false"] {
        background-color: transparent;
        color: var(--c-black);
        border-color: var(--c-gray);
    }
    .YesNo__button[aria-checked="true"] {
        background-color: var(--c-disabled);
        color: var(--c-black);
        border-color: var(--c-black);
    }
    .btn-raised:hover, .btn-raised:focus {
        box-shadow: none;
    }
}

/* ERROR */
.LiveField--error .LiveField__error {
	font-family: var(--base-font);
	font-size: var(--font-size-s);
	color: var(--c-error);
	background-color: transparent;
	text-align:left;
	text-transform: none;
}

.LiveField--submiterror {
    & .LiveField__header {
        color: var(--c-error);
    }
    
    .Select.Select--single {
        border-color: var(--c-error) !important;   
    }
    
    & input[type="text"],
    input[type="tel"],
    input[type="email"] {
        border-color: var(--c-error) !important;
    }
}