@saooti/octopus-sdk 1.0.0 → 1.1.1

package/src/assets/multiselect.scss

@@ -1,582 +1,531 @@
 /* Added styles */
 @import '../sass/_variables.scss';
+.octopus-app{
 
-.multiselect-hide-arrow {
-	.multiselect__tags {
-		background: none;
-		border: none;
-	}
-	.multiselect__spinner {
-		background: none;
-	}
-	.multiselect__select::before {
-		display: none;
-	}
-}
-
-.light-multiselect{
-	.multiselect__tags {
-        border-radius: 0.3rem;
-        padding: 10px 40px 5px 0;
-        background: transparent;
-        border-color: $octopus-background;
-       
-    }
-	
-
-  .multiselect__input,
-  .multiselect__single {
-    background: none;
-  }
-  .multiselect--active .multiselect__select {
-    transform: unset;
-    background: none;
-  }
-  .multiselect__spinner {
-    background: none;
-  }
-  .option__image {
-    display: none;
-  }
-  .option__title {
-    padding-left: 0 !important;
-    font-weight: bold;
-  }
-}
-
-.multiselect-octopus-proposition{
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-
-	.option__image {
-		height: 32px;
-		width: 32px;
-        border-radius: 50px;
-        margin: 0 0.5rem 0 0;
-	}
-	.option__title {
-		padding-left: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-}
-
-.multiselect-remaining-elements {
-	text-align: center;
-	font-weight: 500;
-	font-size: 0.65rem;
-	margin: 0.2rem;
-} 
-
-.octopus-arrow-down,
-.octopus-arrow-down-2
-{
-	height: 1.2rem;
-	width: 1.2rem;
-	font-size: 1.2rem;
-	cursor: pointer;
-	position: absolute;
-	right: 10px;
-	top: 12px;
-	margin: 0;
-	background-color: #ccc;
-	border-radius: 50%;
-
-	&:before{
-		position: relative;
-		top:2px;
-	}
-}
-.classic-select.octopus-arrow-down-2{
-    pointer-events: none;
-}
-
-.octopus-arrow-down-2{
-	right: 10px;
-    top: 11px;
-    @media (max-width: 450px) {
-        top: 14px;
-    }
-}
-
-
-/************************************************************************/
-
-
-fieldset[disabled] .multiselect {
-    pointer-events: none;
-}
-
-.multiselect__spinner {
-    position: absolute;
-    right: 1px;
-    top: 1px;
-    width: 48px;
-    height: 35px;
-    background: #fff;
-    display: block;
-}
-
-.multiselect__spinner:after,
-.multiselect__spinner:before {
-    position: absolute;
-    content: "";
-    top: 50%;
-    left: 50%;
-    margin: -8px 0 0 -8px;
-    width: 16px;
-    height: 16px;
-    border-radius: 100%;
-    border: 2px solid transparent;
-    border-top-color: #f8f9fa;
-    box-shadow: 0 0 0 1px transparent;
-}
-
-.multiselect__spinner:before {
-    animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-    animation-iteration-count: infinite;
-}
-
-.multiselect__spinner:after {
-    animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-    animation-iteration-count: infinite;
-}
-
-.multiselect__loading-enter-active,
-.multiselect__loading-leave-active {
-    transition: opacity 0.4s ease-in-out;
-    opacity: 1;
-}
-
-.multiselect__loading-enter,
-.multiselect__loading-leave-active {
-    opacity: 0;
-}
-
-.multiselect,
-.multiselect__input,
-.multiselect__single {
-    font-family: inherit;
-    font-size: 16px;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-}
-
-.multiselect {
-    box-sizing: content-box;
-    display: block;
-    position: relative;
-    min-height: 40px;
-    text-align: left;
-    color: #35495e;
-}
-
-.multiselect.light-multiselect {
-    .multiselect__tags {
-        padding: 0 40px 0 0;
-        min-height: auto;
+    .default-multiselect-width {
+        width: auto;
+        font-size: 1rem;
+    }
+    .multiselect-transparent{
+        .multiselect__tags, .multiselect__input, .multiselect__single{
+            background: transparent !important;
+        }
+        .multiselect__tags-wrap{
+            display: flex;
+            align-items: center;
+        }
+        .multiselect__tags{
+            border: 0;
+            padding-left: 0;
+            padding-top: 0;
+            display: flex;
+            align-items: center;
+        }
+        .multiselect__tag{
+            margin-bottom: 0;
+            border: 1px gray solid;
+        }
+    }
+
+    .multiselect-octopus-proposition{
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .option__image {
+            height: 32px;
+            width: 32px;
+            border-radius: 50px;
+            margin: 0 0.5rem 0 0;
+        }
+        .option__title {
+            padding-left: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .multiselect-remaining-elements {
+        text-align: center;
+        font-weight: 500;
+        font-size: 0.65rem;
+        margin: 0.2rem;
+    } 
+
+    .octopus-arrow-down
+    {
+        height: 1.2rem;
+        width: 1.2rem;
+        font-size: 1.2rem;
+        cursor: pointer;
+        position: absolute;
+        right: 10px;
+        top: 0.4rem;
+        margin: 0;
+        background-color: #ccc;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:before{
+            font-size: 0.8rem;
+        }
     }
+
+
+    /************************************************************************/
+
+
+    fieldset[disabled] .multiselect {
+        pointer-events: none;
+    }
+
+    .multiselect__spinner {
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        width: 48px;
+        height: 35px;
+        display: block;
+    }
+
+    .multiselect__spinner:after,
+    .multiselect__spinner:before {
+        position: absolute;
+        content: "";
+        top: 50%;
+        left: 50%;
+        margin: -8px 0 0 -8px;
+        width: 16px;
+        height: 16px;
+        border-radius: 100%;
+        border: 2px solid transparent;
+        border-top-color: #000000;
+        box-shadow: 0 0 0 1px transparent;
+    }
+
+    .multiselect__spinner:before {
+        animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+        animation-iteration-count: infinite;
+    }
+
+    .multiselect__spinner:after {
+        animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+        animation-iteration-count: infinite;
+    }
+
+    .multiselect__loading-enter-active,
+    .multiselect__loading-leave-active {
+        transition: opacity 0.4s ease-in-out;
+        opacity: 1;
+    }
+
+    .multiselect__loading-enter,
+    .multiselect__loading-leave-active {
+        opacity: 0;
+    }
+
+    .multiselect,
+    .multiselect__input,
     .multiselect__single {
-        margin-bottom: 0;
-    }
-    .octopus-arrow-down-2 {
-        top: 2px;
-    }
-    display: flex;
-    align-items: center;
-    min-height: auto;
-    top: 0;
-}
-
-.multiselect * {
-    box-sizing: border-box;
-}
-
-.multiselect:focus {
-    outline: none;
-}
-
-.multiselect--disabled {
-    background: #ededed;
-    pointer-events: none;
-    opacity: 0.6;
-}
-
-.multiselect--active {
-    z-index: 50;
-}
-
-.multiselect--active .multiselect__select {
-    transform: rotate(180deg);
-}
-
-.multiselect__input,
-.multiselect__single {
-    position: relative;
-    display: inline-block;
-    min-height: 20px;
-    line-height: 28px;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    padding: 0 0 0 5px;
-    width: 100%;
-    transition: border 0.1s ease;
-    box-sizing: border-box;
-    margin-bottom: 8px;
-    vertical-align: top;
-}
-
-.multiselect__input:-ms-input-placeholder {
-    color: #35495e;
-}
-
-.multiselect__input::placeholder {
-    color: #35495e;
-}
-
-.multiselect__tag~.multiselect__input,
-.multiselect__tag~.multiselect__single {
-    width: auto;
-}
-
-.multiselect__input:hover,
-.multiselect__single:hover {
-    border-color: #cfcfcf;
-}
-
-.multiselect__input:focus,
-.multiselect__single:focus {
-    border-color: #a8a8a8;
-    outline: none;
-}
-
-.multiselect__single {
-    padding-left: 5px;
-    margin-bottom: 5px;
-}
-
-.multiselect__tags-wrap {
-    display: inline;
-}
-
-.multiselect__tags {
-    min-height: 45px;
-    display: block;
-    padding: 9px 40px 0 20px;
-    border-radius: 0.3em;
-    border: 0.1rem solid #dee2e6;
-    background: #fff;
-    font-size: 14px;
-    @media (max-width: 960px) {
-        padding: 10px 40px 5px 0;
+        font-family: inherit;
+        font-size: 16px;
+        -ms-touch-action: manipulation;
+        touch-action: manipulation;
+    }
+
+    .multiselect {
+        box-sizing: content-box;
+        display: block;
+        position: relative;
+        min-height: 40px;
+        text-align: left;
+        color: #35495e;
+    }
+
+
+
+    .multiselect * {
+        box-sizing: border-box;
+    }
+
+    .multiselect--disabled {
+        background: #ededed;
+        pointer-events: none;
+        opacity: 0.6;
+    }
+
+    .multiselect--active {
+        z-index: 50;
+    }
+
+    .multiselect--active .multiselect__select {
+        transform: rotate(180deg);
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+        position: relative;
+        display: inline-block;
+        min-height: 20px;
+        line-height: 28px;
+        border: none;
+        border-radius: 5px;
+        padding: 0 0 0 5px;
+        width: 100%;
+        transition: border 0.1s ease;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+        vertical-align: top;
+    }
+
+    .multiselect__input:-ms-input-placeholder {
+        color: #35495e;
+    }
+
+    .multiselect__input::placeholder {
+        color: #35495e;
+    }
+
+    .multiselect__tag~.multiselect__input,
+    .multiselect__tag~.multiselect__single {
+        width: auto;
+    }
+
+    .multiselect__input:hover,
+    .multiselect__single:hover {
+        border-color: #cfcfcf;
+    }
+
+    .multiselect__input:focus,
+    .multiselect__single:focus {
+        border-color: #a8a8a8;
+    }
+
+    .multiselect__single {
+        padding-left: 5px;
+        margin-bottom: 5px;
+    }
+
+    .multiselect__tags-wrap {
+        display: inline;
+    }
+
+    .multiselect__tags {
+        min-height: 45px;
+        display: block;
+        padding: 9px 40px 0 20px;
+        border-radius: 0.3em;
+        border: 0.1rem solid #dee2e6;
+        background: #fff;
+        font-size: 14px;
+        @media (max-width: 960px) {
+            padding: 10px 40px 5px 0;
+            margin: 0;
+        }
+    }
+
+    .multiselect__tag {
+        position: relative;
+        display: inline-block;
+        padding: 4px 26px 4px 10px;
+        border-radius: 5px;
+        margin-right: 10px;
+        color: black;
+        line-height: 1;
+        background: #f8f9fa;
+        margin-bottom: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: 100%;
+        text-overflow: ellipsis;
+    }
+
+    .multiselect__tag-icon {
+        cursor: pointer;
+        margin-left: 7px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        font-weight: 700;
+        font-style: normal;
+        width: 22px;
+        text-align: center;
+        line-height: 22px;
+        transition: all 0.2s ease;
+        border-radius: 5px;
+    }
+
+    .multiselect__tag-icon:after {
+        content: "\D7";
+        color: #266d4d;
+        font-size: 14px;
+    }
+
+    .multiselect__tag-icon:focus,
+    .multiselect__tag-icon:hover {
+        background:#d33e3d;
+    }
+
+    .multiselect__tag-icon:focus:after,
+    .multiselect__tag-icon:hover:after {
+        color: #fff;
+    }
+
+    .multiselect__current {
+        min-height: 40px;
+        overflow: hidden;
+        padding: 8px 30px 0 12px;
+        white-space: nowrap;
+        border-radius: 5px;
+        border: 1px solid #e8e8e8;
+    }
+
+    .multiselect__current,
+    .multiselect__select {
+        line-height: 16px;
+        box-sizing: border-box;
+        display: block;
         margin: 0;
+        text-decoration: none;
+        cursor: pointer;
     }
-}
-
-.multiselect__tag {
-    position: relative;
-    display: inline-block;
-    padding: 4px 26px 4px 10px;
-    border-radius: 5px;
-    margin-right: 10px;
-    color: black;
-    line-height: 1;
-    background: #f8f9fa;
-    margin-bottom: 5px;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-    text-overflow: ellipsis;
-}
-
-.multiselect__tag-icon {
-    cursor: pointer;
-    margin-left: 7px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    font-weight: 700;
-    font-style: normal;
-    width: 22px;
-    text-align: center;
-    line-height: 22px;
-    transition: all 0.2s ease;
-    border-radius: 5px;
-}
-
-.multiselect__tag-icon:after {
-    content: "\D7";
-    color: #266d4d;
-    font-size: 14px;
-}
-
-.multiselect__tag-icon:focus,
-.multiselect__tag-icon:hover {
-    background:#d33e3d;
-}
-
-.multiselect__tag-icon:focus:after,
-.multiselect__tag-icon:hover:after {
-    color: #fff;
-}
-
-.multiselect__current {
-    min-height: 40px;
-    overflow: hidden;
-    padding: 8px 30px 0 12px;
-    white-space: nowrap;
-    border-radius: 5px;
-    border: 1px solid #e8e8e8;
-}
-
-.multiselect__current,
-.multiselect__select {
-    line-height: 16px;
-    box-sizing: border-box;
-    display: block;
-    margin: 0;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.multiselect__select {
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    right: 1px;
-    top: 1px;
-    padding: 4px 8px;
-    text-align: center;
-    transition: transform 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.multiselect__select:before {
-    position: relative;
-    right: 0;
-    top: 0;
-    color: #999;
-    margin-top: 4px;
-    border-color: #999 transparent transparent;
-    border-style: solid;
-    border-width: 5px 5px 0;
-    content: "";
-}
-
-.multiselect__placeholder {
-    color: #adadad;
-    display: inline-block;
-    margin-bottom: 10px;
-    padding-top: 2px;
-}
-
-.multiselect--active .multiselect__placeholder {
-    display: none;
-}
-
-.multiselect__content-wrapper {
-    position: absolute;
-    display: block;
-    background: #fff;
-    width: 100%;
-    max-height: 240px;
-    overflow: auto;
-    border: 1px solid #e8e8e8;
-    border-top: none;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    z-index: 50;
-    -webkit-overflow-scrolling: touch;
-}
-
-.multiselect__content {
-    list-style: none;
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    vertical-align: top;
-}
-
-.multiselect--above .multiselect__content-wrapper {
-    bottom: 100%;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-bottom: none;
-    border-top: 1px solid #e8e8e8;
-}
-
-.multiselect__content::webkit-scrollbar {
-    display: none;
-}
-
-.multiselect__element {
-    display: block;
-}
-
-.multiselect__option {
-    display: block;
-    padding: 12px;
-    min-height: 40px;
-    line-height: 16px;
-    text-decoration: none;
-    text-transform: none;
-    vertical-align: middle;
-    position: relative;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.multiselect__option:after {
-    top: 0;
-    right: 0;
-    position: absolute;
-    line-height: 40px;
-    padding-right: 12px;
-    padding-left: 20px;
-    font-size: 13px;
-}
-
-.multiselect__option--highlight {
-    background: #f8f9fa;
-    outline: none;
-    color: #000;
-}
-
-.multiselect__option--highlight:after {
-    content: attr(data-select);
-    background: #f8f9fa;
-    color: #000;
-}
-
-.multiselect__option--selected {
-    background: #f3f3f3;
-    color: #35495e;
-    font-weight: 700;
-}
-
-.multiselect__option--selected:after {
-    content: attr(data-selected);
-    color: silver;
-}
-
-.multiselect__option--selected.multiselect__option--highlight {
-    background: #ff6a6a;
-    color: #fff;
-}
-
-.multiselect__option--selected.multiselect__option--highlight:after {
-    background: #ff6a6a;
-    content: attr(data-deselect);
-    color: #fff;
-}
-
-.multiselect--disabled .multiselect__current,
-.multiselect--disabled .multiselect__select {
-    background: #ededed;
-    color: #a6a6a6;
-}
-
-.multiselect__option--disabled {
-    background: #ededed !important;
-    color: #a6a6a6 !important;
-    cursor: text;
-    pointer-events: none;
-}
-
-.multiselect__option--group {
-    background: #ededed;
-    color: #35495e;
-}
-
-.multiselect__option--group.multiselect__option--highlight {
-    background: #35495e;
-    color: #fff;
-}
-
-.multiselect__option--group.multiselect__option--highlight:after {
-    background: #35495e;
-}
-
-.multiselect__option--disabled.multiselect__option--highlight {
-    background: #dedede;
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight {
-    background: #ff6a6a;
-    color: #fff;
-}
-
-.multiselect__option--group-selected.multiselect__option--highlight:after {
-    background: #ff6a6a;
-    content: attr(data-deselect);
-    color: #fff;
-}
-
-.multiselect-enter-active,
-.multiselect-leave-active {
-    transition: all 0.15s ease;
-}
-
-.multiselect-enter,
-.multiselect-leave-active {
-    opacity: 0;
-}
-
-.multiselect__strong {
-    margin-bottom: 8px;
-    line-height: 20px;
-    display: inline-block;
-    vertical-align: top;
-}
-
-[dir="rtl"] .multiselect {
-    text-align: right;
-}
-
-[dir="rtl"] .multiselect__select {
-    right: auto;
-    left: 1px;
-}
-
-[dir="rtl"] .multiselect__tags {
-    padding: 8px 8px 0 40px;
-}
-
-[dir="rtl"] .multiselect__content {
-    text-align: right;
-}
-
-[dir="rtl"] .multiselect__option:after {
-    right: auto;
-    left: 0;
-}
-
-[dir="rtl"] .multiselect__clear {
-    right: auto;
-    left: 12px;
-}
-
-[dir="rtl"] .multiselect__spinner {
-    right: auto;
-    left: 1px;
-}
-
-@keyframes spinning {
-    0% {
-        transform: rotate(0);
-    }
-
-    to {
-        transform: rotate(2turn);
+
+    .multiselect__select {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        right: 1px;
+        top: 1px;
+        padding: 4px 8px;
+        text-align: center;
+        transition: transform 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .multiselect__select:before {
+        position: relative;
+        right: 0;
+        top: 0;
+        color: #999;
+        margin-top: 4px;
+        border-color: #999 transparent transparent;
+        border-style: solid;
+        border-width: 5px 5px 0;
+        content: "";
+    }
+
+    .multiselect__placeholder {
+        color: #757575;
+        display: inline-block;
+        margin-bottom: 10px;
+        padding-top: 2px;
+    }
+
+    .multiselect--active .multiselect__placeholder {
+        display: none;
+    }
+
+    .multiselect__content-wrapper {
+        position: absolute;
+        display: block;
+        background: #fff;
+        width: 100%;
+        max-height: 240px;
+        overflow: auto;
+        border: 1px solid #e8e8e8;
+        border-top: none;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        z-index: 50;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .multiselect__content {
+        list-style: none;
+        display: inline-block;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        vertical-align: top;
+    }
+
+    .multiselect--above .multiselect__content-wrapper {
+        bottom: 100%;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border-bottom: none;
+        border-top: 1px solid #e8e8e8;
+    }
+
+    .multiselect__content::webkit-scrollbar {
+        display: none;
+    }
+
+    .multiselect__element {
+        display: block;
+    }
+
+    .multiselect__option {
+        display: block;
+        padding: 12px;
+        min-height: 40px;
+        line-height: 16px;
+        text-decoration: none;
+        text-transform: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .multiselect__option:after {
+        top: 0;
+        right: 0;
+        position: absolute;
+        line-height: 40px;
+        padding-right: 12px;
+        padding-left: 20px;
+        font-size: 13px;
+    }
+
+    .multiselect__option--highlight {
+        background: #f8f9fa;
+        color: #000;
+    }
+
+    .multiselect__option--highlight:after {
+        content: attr(data-select);
+        background: #f8f9fa;
+        color: #000;
+    }
+
+    .multiselect__option--selected {
+        background: #f3f3f3;
+        color: #35495e;
+        font-weight: 700;
+    }
+
+    .multiselect__option--selected:after {
+        content: attr(data-selected);
+        color: silver;
+    }
+
+    .multiselect__option--selected.multiselect__option--highlight {
+        background: #ff6a6a;
+        color: #fff;
+    }
+
+    .multiselect__option--selected.multiselect__option--highlight:after {
+        background: #ff6a6a;
+        content: attr(data-deselect);
+        color: #fff;
+    }
+
+    .multiselect--disabled .multiselect__current,
+    .multiselect--disabled .multiselect__select {
+        background: #ededed;
+        color: #a6a6a6;
+    }
+
+    .multiselect__option--disabled {
+        background: #ededed !important;
+        color: #a6a6a6 !important;
+        cursor: text;
+        pointer-events: none;
+    }
+
+    .multiselect__option--group {
+        background: #ededed;
+        color: #35495e;
+    }
+
+    .multiselect__option--group.multiselect__option--highlight {
+        background: #35495e;
+        color: #fff;
+    }
+
+    .multiselect__option--group.multiselect__option--highlight:after {
+        background: #35495e;
+    }
+
+    .multiselect__option--disabled.multiselect__option--highlight {
+        background: #dedede;
+    }
+
+    .multiselect__option--group-selected.multiselect__option--highlight {
+        background: #ff6a6a;
+        color: #fff;
+    }
+
+    .multiselect__option--group-selected.multiselect__option--highlight:after {
+        background: #ff6a6a;
+        content: attr(data-deselect);
+        color: #fff;
+    }
+
+    .multiselect-enter-active,
+    .multiselect-leave-active {
+        transition: all 0.15s ease;
+    }
+
+    .multiselect-enter,
+    .multiselect-leave-active {
+        opacity: 0;
+    }
+
+    .multiselect__strong {
+        margin-bottom: 8px;
+        line-height: 20px;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    [dir="rtl"] .multiselect {
+        text-align: right;
+    }
+
+    [dir="rtl"] .multiselect__select {
+        right: auto;
+        left: 1px;
+    }
+
+    [dir="rtl"] .multiselect__tags {
+        padding: 8px 8px 0 40px;
+    }
+
+    [dir="rtl"] .multiselect__content {
+        text-align: right;
+    }
+
+    [dir="rtl"] .multiselect__option:after {
+        right: auto;
+        left: 0;
+    }
+
+    [dir="rtl"] .multiselect__clear {
+        right: auto;
+        left: 12px;
+    }
+
+    [dir="rtl"] .multiselect__spinner {
+        right: auto;
+        left: 1px;
+    }
+
+    @keyframes spinning {
+        0% {
+            transform: rotate(0);
+        }
+
+        to {
+            transform: rotate(2turn);
+        }
     }
 }