/* 
    
    tcare-ui.css 
    10/4/2022

    UI components for Referrals. Can be extended later.
    These are based on Sydney Morr's Figma mockups.

*/

:root {
	--tcui-primary: #611C73;
	--tcui-secondary: #FE4672;

	--tcui-purple: #611C73;
	--tcui-aqua: #B6CAFF;
	--tcui-aqua-light: #EEF9FC;
    --tcui-periwinkle: #B6CAFF;
	--tcui-ruby: #FE4672;
	--tcui-ruby-light: #FEE7E8;
    --tcui-dark-purple: #391A52;
    --tcui-light-purple: #A075A5;
    --tcui-white: #FFFFFF;
    --tcui-gray: #F1EFF1;
    --tcui-gray-2: #E9E5EA;
    --tcui-cream: #FEF9F1;
    --tcui-dark-gray: #cccccc;
    

    --tcui-placeholder: #D5D8D8;

    --tcui-outline: #F6E5F3;
    --tcui-input-border: #B9E4F2;
    --tcui-control-border: #B9E4F2;
    --tcui-field-label: #887392;
}



.tcui-control {
    width: 100%;                        /* of container div */	
    font-family: 'Manrope';
}

.tcui-control .label {
    margin-left: 10px;
}



/* FLEX RELATED */

.tcui-control .flex-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* border: 1px solid red; */
}

.tcui-control .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tcui-control .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* PLACEHOLDERS FOR INPUT CONTROLS */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--tcui-placeholder);
    opacity: 1; /* Firefox */
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--tcui-placeholder);
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--tcui-placeholder);
}

/* UI CONTROLS - ALL MUST BE INSIDE WRAPPER DIVS */

/* TEXT INPUT - actual HTML control*/
.tcui-control input {
    width: 100%;
    background: #FFFFFF;
    min-height: 24px;
    padding: 4px 10px;
    font-size: 14px;
    border: 1px solid var(--tcui-input-border);
    border-radius: 4px;    
}


/* TEXTAREA - actual HTML control*/
.tcui-control textarea {
    width: 97%;
    min-width: 97%;
    background: #FFFFFF;
    min-height: 20px;
    padding: 4px 10px;
    font-size: 14px;
    font-family: 'Manrope';
    border: 1px solid var(--tcui-input-border);
    border-radius: 4px;    
}

/* RADIO BUTTON - custom CSS graphics */
.tcui-control.radio-button-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tcui-control .radio-button {
    width: 25%;
    margin-bottom: 5px;
}

.tcui-control .radio-button .outer {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--tcui-control-border);
}

.tcui-control .radio-button .outer.selected {
    border: 1px solid var(--tcui-secondary);
}

.tcui-control .radio-button .inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--tcui-secondary);
}




/* CHECKBOX - custom CSS graphics */
.tcui-control.check-box-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.tcui-control .check-box {
    width: 25%;
    margin-bottom: 5px;
}

.tcui-control .check-box .outer {
    width: 16px;
    height: 16px;
    border-radius: 25%;
    border: 1px solid var(--tcui-control-border);
}

.tcui-control .check-box .outer.selected {
    border: 1px solid var(--tcui-secondary);
    background-color: var(--tcui-secondary);
}

.tcui-control .check-box .inner {
    position: relative;
    left: 0px;
    top: -1px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




/* BOOLEAN CHECKBOX - custom CSS graphics */
.tcui-control.boolean-check-box {
    width: 100%;
    margin-bottom: 5px;
}

.tcui-control.boolean-check-box .label {
    width: 100%;
    margin-left: 10px;
}


.tcui-control.boolean-check-box .outer {
    width: 16px;
    height: 16px;
    border-radius: 25%;
    border: 1px solid var(--tcui-control-border);
}

.tcui-control.boolean-check-box .outer.selected {
    border: 1px solid var(--tcui-secondary);
    background-color: var(--tcui-secondary);
}

.tcui-control.boolean-check-box .inner {
    position: relative;
    left: 0px;
    top: -1px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}






/* NUMBER - actual HTML control*/
.tcui-control .number {
    width: 25%;
}


/* SELECT - actual HTML control*/
.tcui-control select {
    width: 28%;
    background: #FFFFFF;
    min-height: 24px;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid var(--tcui-input-border);
    border-radius: 4px;    
}


.tcui-control.date-wrapper {
    width: 100%;
    min-height: 24px;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 4px;    
    border: 1px solid var(--tcui-input-border);
}

.tcui-control.date-wrapper svg {
    width: 24px;
    height: 24px;
    outline: none;
    fill: var(--tcui-input-border);
}

.tcui-control .date-time-field {
    width: 100%;
}

.tcui-control .date-time-field input {
    width: 100%;
    outline: none;
    border: none;
}

.tcui-comment {
    width: fit-content;
}


/* CSS class ids from the back end - implement here */
.tcui-comment .heading-1 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #611C73;
}

.tcui-comment .spacer-1 {
    width: 100%;
    height: 0px;
    margin-bottom: 30px;
}


/* BUTTON - not really a TCare UI control - just styling */
.tcui-button {
    width: 125px;
    height: 35px;
    margin: 0px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
    border-radius: 16px;
    /* border: 1px solid #E9E5EA; */
    border: none;
    /* colors will change but nothing else */
    color: white;
    background-color: var(--tcui-primary);
}

.tcui-button:hover {
    color: white;
    background-color: var(--tcui-secondary);
}

/* AQUA BUTTON */
.tcui-button.aqua {
    color: white;
    background-color: var(--tcui-aqua);
}

.tcui-button.aqua:hover {
    color: white;
    background-color: var(--tcui-secondary);
}

/* WHITE BUTTON */
.tcui-button.white {
    color: var(--tcui-purple);
    background-color: var(--tcui-white);
}

.tcui-button.white:hover {
    color: white;
    background-color: var(--tcui-purple);
}

/* WHITE BUTTON - same as WHITE but with border */
.tcui-button.clear {
    color: var(--tcui-purple);
    background-color: var(--tcui-white);
    border: 1px solid var(--tcui-gray);
}

.tcui-button.clear:hover {
    color: var(--tcui-purple);
    background-color: var(--tcui-gray);
}

/* GRAY BUTTON */
.tcui-button.gray {
    color: var(--tcui-purple);
    background-color: var(--tcui-gray);
}

.tcui-button.gray:hover {
    color: var(--tcui-gray);
    background-color: var(--tcui-purple);
}


/* RUBY BUTTON */
.tcui-button.ruby {
    color: var(--tcui-white);
    background-color: var(--tcui-secondary);
}

.tcui-button.ruby:hover {
    color: var(--tcui-white);
    background-color: #D3DDF9;
}


/* PERIWINKLE BUTTON */
.tcui-button.periwinkle {
    color: var(--tcui-primary);
    background-color: #D3DDF9;
}

.tcui-button.periwinkle:hover {
    color: var(--tcui-white);
    background-color: var(--tcui-secondary);
}