.nBaseCascaser { position: relative; z-index: auto; outline: none; width: 100%; box-shadow: none; max-width: 100%; display: inline-block; vertical-align: bottom; border-radius: 8px; min-height: max(34px, 32Px); line-height: 1.5; font-size: max(14px, 13Px); &:hover, &.nBaseCascaserActive { cursor: pointer; .n-base-selection__state-border { z-index: 1; border-color: #289bff; } } .n-base-selection-tags { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; border: 1px solid #e0e0e6; border-radius: inherit; transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); } .n-base-selection-input { font-size: inherit; line-height: inherit; outline: none; cursor: pointer; box-sizing: border-box; border: none; width: 100%; padding: 0 26px 0 12px; background-color: #0000; color: rgb(51, 54, 57); transition: color .3s cubic-bezier(.4, 0, .2, 1); caret-color: #18a058; height: 100%; display: flex; align-items: center; .n-base-selection-input__content { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } .n-base-suffix { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; .arrow { width: 1em; height: 1em; img { width: inherit; height: inherit; } } } .n-base-selection-placeholder { display: flex; align-items: center; white-space: nowrap; pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0 12px; transition: color .3s cubic-bezier(.4, 0, .2, 1); color: rgba(19, 20, 21, 0.4); .inner { max-width: 100%; overflow: hidden; } } .n-base-selection__border, .n-base-selection__state-border { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; border: 1px solid #e0e0e6; border-radius: inherit; transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1); } .n-base-selection__state-border { z-index: 1; border-color: #0000; } } .cascaderPopover { width: 467px; background: #FFFFFF !important; box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12) !important; border-radius: 10px !important; padding: 13px 0 !important; } .baseScrollBar { padding: 0 13px; } .baseContentTitle { font-weight: 600; font-size: max(13px, 13Px); color: #131415; padding-bottom: 10px; } .baseContentWrap { padding-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; .tag { display: inline-block; background: #F5F6FA; border-radius: 3px; font-weight: 400; font-size: max(13px, 13Px); color: rgba(0, 0, 0, 0.6); padding: 3px 10px; cursor: pointer; } .tagActive { background: #D2ECFF; font-weight: 600; color: #131415; } } .btnGroup { border-top: 1px solid #F2F2F2; padding: 10px 25px; display: flex; align-items: center; width: 100%; .btn { background: #F1F2F6; border-radius: 5px; font-weight: 600; font-size: 13Px; height: max(34px, 32Px); line-height: max(34px, 32Px); flex: 1; text-align: center; cursor: pointer; &+.btn { margin-left: 17px; } } .btnCancel { font-weight: 600; color: #1E2022; } .btnConfirm { background: linear-gradient(312deg, #1B7AF8 0%, #3CBBFF 100%); color: #FFFFFF; } }