@charset "UTF-8";
.test {
color: red;
}
.banana {
container-type: inline-size;
}
.mgnl-form-group {
display: grid;
grid-template-columns: 38px 150px 34px 1fr 34px 34px;
grid-template-areas: "handle label help input indicator icon" "handle label help error indicator icon";
gap: 0 5px;
max-width: 1050px;
}
.mgnl-form-group__handle {
grid-area: handle;
color: var(--mgnl-color-gray-60);
content: url('data:image/svg+xml;utf8,');
display: inline-block;
width: 38px; /* SVG width */
height: 38px; /* SVG height */
cursor: pointer;
}
.mgnl-form-group__icon {
grid-area: icon;
cursor: pointer;
content: url('data:image/svg+xml;utf8,');
display: inline-block;
}
.mgnl-form-group__indicator {
grid-area: indicator;
content: url('data:image/svg+xml;utf8,');
display: inline-block;
user-select: none;
}
.mgnl-form-group .mgnl-form-label {
grid-area: label;
text-align: right;
transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
padding: 10px;
user-select: none;
}
.mgnl-form-group .mgnl-form-label__icon {
content: url('data:image/svg+xml;utf8,');
display: inline-block;
width: 38px; /* SVG width */
height: 34px; /* SVG height */
cursor: pointer;
}
@container (max-width: 500px) {
.mgnl-form-group {
grid-template-columns: 38px 1fr 34px 34px 34px 34px;
grid-template-areas: "handle label label label help icon" "handle input input input input indicator" "handle error error error error indicator";
}
.mgnl-form-group .mgnl-form-label {
text-align: left;
}
}
.mgnl-form-group .mgnl-form-field {
grid-area: input;
border: 1px solid var(--mgnl-color-gray-30);
z-index: 10;
padding: 10px;
transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
border-radius: 5px;
font-family: var(--mgnl-typography-ui-default-md-font-family);
font-size: var(--mgnl-typography-ui-default-md-font-size);
}
.mgnl-form-group .mgnl-form-field:hover {
border: 1px solid var(--mgnl-color-gray-60);
}
.mgnl-form-group .mgnl-form-field:focus {
outline: 0;
background-color: #fff;
border: 1px solid var(--mgnl-color-emerald-50);
box-shadow: 0 0 0 var(--mgnl-dimension-2) var(--mgnl-color-emerald-50);
}
.mgnl-form-group .mgnl-form-field:focus + .mgnl-form-label {
font-weight: bold;
}
.mgnl-form-group .mgnl-form-field:required:invalid + .mgnl-form-label::after {
content: "*";
color: red;
}
.mgnl-form-group select.mgnl-form-field {
appearance: none;
}
.mgnl-form-group select.mgnl-form-field::after {
display: block;
content: "⌄";
width: 10px;
height: 10px;
flex: 1;
}
.mgnl-form-group select.mgnl-form-field option {
font-size: 10px;
}
.mgnl-form-group .error {
grid-area: error;
opacity: 0;
background-color: var(--mgnl-form-group-error-message-default-color-background);
color: var(--mgnl-form-group-error-message-default-color-text);
height: 0;
transition: all 0.1s ease-in-out;
transform: translateY(-10px);
}
.mgnl-form-group:has(select)::after {
position: relative;
display: block;
content: "⌄";
width: 30px;
justify-content: center;
align-items: center;
font-size: 16px;
background-color: var(--mgnl-color-primary-100);
color: #fff;
left: -35px;
}
.mgnl-input-group {
display: flex;
justify-content: space-between;
grid-area: input;
z-index: 10;
border-radius: 5px;
transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
border: 1px solid var(--mgnl-color-gray-30);
}
.mgnl-input-group:hover {
border: 1px solid var(--mgnl-color-gray-40);
border-radius: 5px;
}
.mgnl-input-group:hover + label {
font-weight: bold;
}
.mgnl-input-group:focus-within {
box-shadow: 0 0 0 var(--mgnl-dimension-2) var(--mgnl-color-emerald-50);
}
.mgnl-input-group:focus-within + label {
font-weight: bold;
}
.mgnl-input-group input.mgnl-form-field {
flex: 1;
outline: 0;
border: 0;
box-shadow: none;
}
.mgnl-input-group input.mgnl-form-field:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: 0;
}
.mgnl-input-group input.mgnl-form-field:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.mgnl-input-group input.mgnl-form-field:hover {
border: none;
}
.mgnl-input-group input.mgnl-form-field:focus {
border: none;
box-shadow: none;
}
.mgnl-input-group__addon {
padding: 10px;
background-color: var(--mgnl-color-gray-20);
color: var(--mgnl-color-gray-60);
}
.mgnl-input-group__addon:first-child {
border-radius: 5px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.mgnl-input-group__addon:last-child {
border-radius: 5px;
border-right: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}