.invite-more { &-container { margin-bottom: 8px; transition: margin-bottom 0.3s; &.elevated { margin-bottom: 36px; } } &-content { display: flex; flex-direction: column; align-items: center; padding: 16px; background: rgba(0, 0, 0, 0.7); border-radius: 8px; color: #fff; font-size: 14px; line-height: 24px; font-weight: 600; } &-header { max-width: 100%; margin-bottom: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } &-button { display: flex; max-width: 100%; height: 40px; box-sizing: border-box; padding: 8px 16px; background: #0376DA; border-radius: 3px; cursor: pointer; @media (hover: hover) and (pointer: fine) { &:hover { background: #278ADF; } } &-text { margin-left: 8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } &-dialog { color: #fff; font-size: 15px; line-height: 24px; &.separator { margin: 24px 0 24px -20px; padding: 0 20px; width: 100%; height: 1px; background: #5E6D7A; } &.email-container { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; margin-top: 24px; width: calc(100% - 26px); height: 22px; background: #2A3A4B; border: 1px solid #5E6D7A; border-radius: 3px; cursor: pointer; &.active { border-radius: 3px 3px 0 0; } } &.icon-container { display: none; &.active { display: flex; width: calc(100% - 26px); padding: 8px 8px 8px 16px; background: #2A3A4B; border: 1px solid #5E6D7A; border-top: none; border-radius: 0 0 3px 3px; & > * { display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; border-radius: 4px; cursor: pointer; } &:hover > div:hover { background-color: rgba(255, 255, 255, 0.2); } & > :not(:last-child) { margin-right: 16px; } .copy-invite-icon > div > svg > path { fill: #A4B8D1; } } } &.dial-in-display { .info-label { color: #A4B8D1; } .dial-in-copy { display: inline-block; vertical-align: middle; cursor: pointer; } } &.invite-buttons { width: 100%; text-align: right; margin-top: 8px; & > a { display: inline-block; height: 24px; width: 48px; border-radius: 3px; text-align: center; text-decoration: none; cursor: pointer; } &-cancel { margin-right: 16px; padding: 7px 15px; background: #2A3A4B; border: 1px solid #5E6D7A; } &-add { padding: 8px 16px; background: #0376DA; } &.disabled { & > a { pointer-events: none; } } } &.stream { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; margin-top: 8px; width: calc(100% - 26px); height: 22px; background: #2A3A4B; border: 1px solid #5E6D7A; border-radius: 3px; cursor: pointer; &:hover { font-weight: 600; } &-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 292px; &.selected { font-weight: 600; } } &.clicked { background: #31B76A; border: 1px solid #31B76A; } & > div > svg > path { fill: #fff; } } } } .mobile-browser { .invite-more-content { font-size: 16px; } .invite-more-button { height: 48px; padding: 12px 16px; } }