.invite-modal__content {
padding: 1rem 0;
background: var(--color-grey-700);
display: flex;
}
.invite-form {
padding: 0 0.5rem;
max-height: calc(100vh - 9rem);
overflow: hidden;
scrollbar-gutter: stable both-edges;
}
.invite-form:hover,
.invite-form:active,
.invite-form:focus {
overflow-y: scroll;
}
.invite-form::-webkit-scrollbar {
width: 0.6em;
}
.invite-form__header-label {
text-align: center;
font-size: 0.875;
color: var(--color-grey-200);
}
.invite-form__header-title {
text-align: center;
font-size: 1.25rem;
margin: .5rem 0 0;
}
.invite-form__type-label {
font-size: 0.75;
color: var(--color-grey-200);
margin: 1rem 0 .5rem;
}
.invite-form__type-label > i {
cursor: pointer;
color: white;
margin-left: .5rem;
}
.invite-form__invite-type-selector svg {
width: 2.25rem
}
.invite-form__indexer {
margin-top: 1rem;
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
}
.invite-form__expires-label {
font-size: 0.75;
color: var(--color-grey-200);
margin: 1rem 0 0.5rem;
}
.invite-form__expires-btns {
display: flex;
gap: 0.5rem;
}
.invite-form__expires-btns > button {
width: 100%;
border: 1px solid var(--color-grey-600);
height: 2.25rem;
border-radius: .375rem;
color: var(--color-grey-200);
}
.invite-form__expires-btns > button.selected {
color: #FFFFFF;
border-color: var(--color-blue-600);
background-color: var(--color-blue-900);
}
.invite-form__expires-btns > button:focus {
outline: none;
}
.invite-form__qr-panel {
display: flex;
flex-direction: column;
width: 100%;
background: var(--color-grey-800);
margin-top: 1rem;
padding: .5rem;
border-radius: .375rem;
}
.invite-form__qr-label {
color: var(--color-grey-200);
font-size: 0.75;
text-align: center;
}
.invite-form__qr-code {
margin-top: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.invite-form__qr-copy-label {
color: var(--color-grey-200);
font-size: 0.75;
text-align: center;
margin: .5rem;
}
.invite-info {
padding: 0 1rem;
max-height: calc(100vh - 6rem);
overflow: auto;
}
.invite-info h2 {
font-size: 1.125rem;
font-weight: 600;
}
.invite-info h3 {
margin-top: 1rem;
font-weight: bold;
}
.invite-info ul {
margin: 0 0 0 1rem;
list-style: none;
}
.invite-info ul > li {
display: flex;
margin-bottom: .5rem;
}
.invite-info ul > li > svg {
margin-right: 0.5rem;
min-width: 1.25rem;
max-width: 1.25rem;
}
.invite-info h3 svg {
display: inline-block;
}
.invite-info__back {
stroke: white;
width: 1.5rem;
height: 1.5rem;
margin-bottom: 1.25rem;
}
.invite-info__back:hover {
stroke: #26D2E8;
}
.invite-info__back:focus {
outline: none;
}