@useblu/ocean-core 1.118.0 → 1.123.0

package/ocean.css

@@ -1356,6 +1356,27 @@
   color: #ced1e1;
   font-weight: 400;
 }
+.ods-input [type=search i] {
+  padding: 0 4px 0 16px;
+}
+.ods-input [type=search i]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+          appearance: none;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjAwNzggNC40ODc2N0MxNS4wNzQxIDQuNDg3MTEgMTUuMTM5OCA0LjQ5OTcyIDE1LjIwMTIgNC41MjQ3OEMxNS4yNjI1IDQuNTQ5ODkgMTUuMzE4MyA0LjU4NzI5IDE1LjM2NTIgNC42MzQxNkMxNS40MTIxIDQuNjgxMDUgMTUuNDQ5NSA0LjczNjg0IDE1LjQ3NDYgNC43OTgyMkMxNS40OTk3IDQuODU5NTMgMTUuNTEyMiA0LjkyNTM0IDE1LjUxMTcgNC45OTE1OEMxNS41MTExIDUuMDU3OTIgMTUuNDk3OCA1LjEyMzk3IDE1LjQ3MTcgNS4xODQ5NEMxNS40NTg2IDUuMjE1NDEgMTUuNDQyNiA1LjI0NDY5IDE1LjQyMzggNS4yNzE4NUwxNS4zNTM1IDUuMzUzODhMMTAuNzA3IDEwLjAwMDRMMTUuMzQ2NyAxNC42NEMxNS40Mzc3IDE0LjczNDIgMTUuNDg4MyAxNC44NjA2IDE1LjQ4NzMgMTQuOTkxNkMxNS40ODYyIDE1LjEyMjcgMTUuNDMzNSAxNS4yNDg1IDE1LjM0MDggMTUuMzQxMkMxNS4yNDgyIDE1LjQzMzcgMTUuMTIzMSAxNS40ODY0IDE0Ljk5MjIgMTUuNDg3N0MxNC44NjExIDE1LjQ4ODggMTQuNzMzOSAxNS40MzgxIDE0LjYzOTYgMTUuMzQ3TDEwLjM1MzUgMTEuMDU5OUwxMCAxMC43MDY0TDUuMzU5MzggMTUuMzQ3QzUuMjY1MDkgMTUuNDM4MSA1LjEzODg4IDE1LjQ4ODggNS4wMDc4MSAxNS40ODc3QzQuODc2NzEgMTUuNDg2NSA0Ljc1MDkxIDE1LjQzMzkgNC42NTgyIDE1LjM0MTJDNC41NjU2MSAxNS4yNDg1IDQuNTEyODYgMTUuMTIyNiA0LjUxMTcyIDE0Ljk5MTZDNC41MTA3MiAxNC44NjM2IDQuNTU5MzUgMTQuNzQwMyA0LjY0NjQ4IDE0LjY0NjlMOS4yOTI5NyAxMC4wMDA0TDQuNjQ2NDggNS4zNTM4OEM0LjU1Mjg0IDUuMjYwMjEgNC41MDAxMSA1LjEzMjggNC41IDUuMDAwMzdDNC41IDQuODY3ODYgNC41NTI4NCA0Ljc0MDYgNC42NDY0OCA0LjY0Njg1QzQuNzQwMjUgNC41NTMxMSA0Ljg2NzQyIDQuNTAwMzcgNSA0LjUwMDM3QzUuMTMyNSA0LjUwMDQyIDUuMjU5OCA0LjU1MzE3IDUuMzUzNTIgNC42NDY4NUwxMCA5LjI5MzMzTDE0LjY0NjUgNC42NDY4NUwxNC42NTIzIDQuNjQwMDFDMTQuNjk4MyA0LjU5MjQxIDE0Ljc1MzcgNC41NTQ4NyAxNC44MTQ1IDQuNTI4NjlDMTQuODc1NSA0LjUwMjQ4IDE0Ljk0MTQgNC40ODgyNSAxNS4wMDc4IDQuNDg3NjdaIiBmaWxsPSIjMzkzQjQ3IiBzdHJva2U9IiNBQUFEQzAiLz4KPC9zdmc+Cgo=");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  height: 20px;
+  padding: 6px;
+  -webkit-transition: background-color 250ms ease-out;
+  transition: background-color 250ms ease-out;
+  width: 20px;
+}
+.ods-input [type=search i]::-webkit-search-cancel-button:hover {
+  background-color: #e0e2ee;
+}
 .ods-input__number-controls {
   cursor: pointer;
 }
@@ -3003,14 +3024,34 @@
 .ods-list .ods-card-list-item:not(:last-of-type) {
   border-bottom: 1px solid #e0e2ee;
 }
-.ods-list .ods-list-action__container .ods-list-action {
+.ods-list .ods-list-action__container .ods-list-action,
+.ods-list .ods-list-action__container .ods-list-settings,
+.ods-list .ods-list-action__container .ods-list-readonly,
+.ods-list .ods-list-settings__container .ods-list-action,
+.ods-list .ods-list-settings__container .ods-list-settings,
+.ods-list .ods-list-settings__container .ods-list-readonly,
+.ods-list .ods-list-readonly__container .ods-list-action,
+.ods-list .ods-list-readonly__container .ods-list-settings,
+.ods-list .ods-list-readonly__container .ods-list-readonly {
   border: 0;
   border-radius: 0;
 }
-.ods-list .ods-list-action__container:last-of-type > .ods-list-action__divider {
+.ods-list .ods-list-action__container:last-of-type > .ods-list-action__divider, .ods-list .ods-list-action__container:last-of-type > .ods-list-readonly__divider, .ods-list .ods-list-action__container:last-of-type > .ods-list-settings__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-action__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-readonly__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-settings__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-action__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-readonly__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-settings__divider {
   border: 0;
 }
-.ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-action--card {
+.ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-action--card, .ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-readonly--card, .ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-settings--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-action--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-readonly--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-settings--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-action--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-readonly--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-settings--card {
   border-bottom: 1px solid #e0e2ee;
 }
 .ods-list .ods-list-expandable--card {
@@ -5154,7 +5195,7 @@
   display: flex;
   flex-direction: row;
   gap: 12px;
-  padding: 16px 12px 16px 16px;
+  padding: 16px 8px 16px 16px;
   transition: 200ms;
   width: 320px;
 }
@@ -5319,24 +5360,19 @@
   position: relative;
 }
 .ods-chips__button {
+  align-items: center;
   background: #f3f5fe;
   border: 0;
   border-radius: 24px;
   color: #0025e0;
   display: flex;
-  font-size: 14px;
-  font-weight: 700;
   gap: 4px;
   height: 32px;
-  padding: 8px 16px;
+  padding: 4px 8px 4px 12px;
 }
-.ods-chips__button:hover, .ods-chips__button:focus {
+.ods-chips__button:hover, .ods-chips__button:focus, .ods-chips__button:active {
   background: #e0e2ee;
 }
-.ods-chips__button:active {
-  background: #0025e0;
-  color: white;
-}
 .ods-chips__button:active .ods-chips__badge > .ods-badge__content {
   background: white;
   color: #0025e0;
@@ -5345,6 +5381,9 @@
   height: 16px;
   width: 16px;
 }
+.ods-chips__button--no-options {
+  padding: 4px 12px;
+}
 .ods-chips__button--disabled {
   background: #f3f5fe;
   pointer-events: none;
@@ -5370,6 +5409,9 @@
   color: #0025e0;
 }
 .ods-chips__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
   margin: 0;
 }
 .ods-chips__options {
@@ -5379,10 +5421,30 @@
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   display: flex;
   flex-direction: column;
-  padding: 4px 0;
   position: absolute;
   top: 38px;
-  width: auto;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 2;
+}
+@media (max-width: 767.98px) {
+  .ods-chips__options {
+    border-radius: 16px 16px 0 0;
+    bottom: 0;
+    left: 0;
+    max-height: 73.5%;
+    overflow: hidden;
+    padding: 0;
+    position: fixed;
+    right: 0;
+    top: initial;
+    width: 100%;
+    z-index: 1000;
+  }
+}
+.ods-chips__options__select-all {
+  border-bottom: 1px solid #e0e2ee;
 }
 .ods-chips__options--content {
   align-items: flex-start;
@@ -5394,20 +5456,6 @@
   scrollbar-width: none;
   width: 220px;
 }
-.ods-chips__options--content--columns-2 {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-template-columns: repeat(2, 1fr);
-  min-width: 296px;
-  width: auto;
-}
-.ods-chips__options--content--columns-3 {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-template-columns: repeat(3, 1fr);
-  min-width: 436px;
-  width: auto;
-}
 .ods-chips__options::-webkit-scrollbar {
   display: none;
 }
@@ -5420,7 +5468,6 @@
   font-size: 14px;
   font-weight: 400;
   gap: 8px;
-  min-height: 40px;
   padding: 8px 12px;
   text-wrap: nowrap;
   width: 100%;
@@ -5439,22 +5486,45 @@
 .ods-chips__options--footer {
   border-top: 1px solid #e0e2ee;
   display: flex;
-  flex-direction: row;
+  gap: 8px;
   justify-content: space-between;
   padding: 16px 16px 16px 8px;
 }
+.ods-chips__options__header {
+  padding: 16px 16px 8px;
+}
+@media (max-width: 767.98px) {
+  .ods-chips__options__header {
+    padding: 0 16px 8px;
+  }
+}
 
-.ods-chips__options--option-container {
-  min-height: 0;
-  padding: 0;
-  width: 100%;
+.ods-chips__options__responsive-header {
+  display: none;
 }
-.ods-chips__options--option-container .ods-checkbox__root-container {
-  width: 100%;
+@media (max-width: 767.98px) {
+  .ods-chips__options__responsive-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 8px 4px;
+  }
+  .ods-chips__options__responsive-header button {
+    color: #aaadc0;
+    height: 32px;
+    max-height: 32px;
+    max-width: 32px;
+    width: 32px;
+  }
+  .ods-chips__options__responsive-header:hover button {
+    background: transparent;
+    color: #aaadc0;
+  }
 }
-.ods-chips__options--option-container .ods-checkbox__root {
-  padding: 16px;
-  width: 100%;
+
+@media (max-width: 767.98px) {
+  .ods-chips__options--footer button {
+    width: 100%;
+  }
 }
 
 .ods-unordered-list-item {
@@ -5828,6 +5898,9 @@
   height: -moz-fit-content;
   height: fit-content;
 }
+.ods-card-group__header--without-subtitle {
+  padding-bottom: 0;
+}
 .ods-card-group__action {
   align-items: center;
   background-color: white;
@@ -6054,6 +6127,131 @@
   margin-right: 24px;
 }
 
+.ods-list-readonly {
+  align-items: center;
+  background-color: white;
+  border: 1px solid #ced1e1;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+.ods-list-readonly__container {
+  width: 100%;
+}
+.ods-list-readonly--card {
+  border-color: #ced1e1;
+}
+.ods-list-readonly--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-readonly__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-readonly__icon {
+  align-items: center;
+  color: #5872f5;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-readonly__icon--inactive {
+  color: #ced1e1;
+}
+.ods-list-readonly__trailing {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  margin-left: auto;
+}
+.ods-list-readonly__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.ods-list-readonly__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+}
+.ods-list-readonly--loading {
+  cursor: default;
+  pointer-events: none;
+}
+.ods-list-readonly--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ods-list-settings {
+  align-items: center;
+  background-color: white;
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  position: relative;
+  width: 100%;
+}
+.ods-list-settings__container {
+  width: 100%;
+}
+.ods-list-settings--card {
+  border-color: #ced1e1;
+}
+.ods-list-settings--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-settings__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-settings__icon {
+  align-items: center;
+  color: #5872f5;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-settings__icon--inactive svg {
+  color: #ced1e1;
+}
+.ods-list-settings__action {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.ods-list-settings__action > .ods-btn {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+.ods-list-settings__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.ods-list-settings__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+}
+.ods-list-settings--loading {
+  cursor: default;
+  pointer-events: none;
+}
+.ods-list-settings--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .ods-list-expandable {
   background-color: white;
   display: flex;
@@ -6182,6 +6380,12 @@
   padding-left: 16px;
   width: 100%;
 }
+@media (max-width: 767.98px) {
+  .ods-list-selectable .ods-checkbox__label,
+.ods-list-selectable .ods-radio__label {
+    padding-left: 0;
+  }
+}
 .ods-list-selectable--loading {
   cursor: default;
   display: flex;
@@ -6221,4 +6425,315 @@
   height: 1px;
   margin: 0 16px;
 }
+
+.ods-internal-contextual-hero {
+  background-color: #f3f5fe;
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero {
+    display: flex;
+  }
+}
+.ods-internal-contextual-hero__body {
+  display: contents;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+.ods-internal-contextual-hero__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  grid-column: 1;
+  grid-row: 1;
+  padding: 16px;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__content {
+    padding: 24px 24px 12px 24px;
+  }
+}
+.ods-internal-contextual-hero__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ods-internal-contextual-hero__actions {
+  display: flex;
+  gap: 16px;
+}
+.ods-internal-contextual-hero__actions > button {
+  min-width: auto;
+}
+.ods-internal-contextual-hero__image {
+  border-radius: 0 8px 0 0;
+  display: flex;
+  grid-column: 2;
+  grid-row: 1;
+  justify-content: flex-end;
+  width: 82px;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image {
+    width: 220px;
+  }
+}
+.ods-internal-contextual-hero__image > img {
+  aspect-ratio: 1/1;
+  border-radius: 0 8px 0 0;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+.ods-internal-contextual-hero__image > *:not(img) {
+  border-radius: 0 8px 0 0;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image > img, .ods-internal-contextual-hero__image > *:not(img) {
+    border-bottom-right-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image > img {
+    width: auto;
+  }
+}
+.ods-internal-contextual-hero__list {
+  display: flex;
+  flex-direction: column;
+  grid-column: 1/-1;
+  grid-row: 2;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__list {
+    padding: 8px;
+  }
+}
+.ods-internal-contextual-hero__list > div > button,
+.ods-internal-contextual-hero__list > div > div {
+  background-color: transparent;
+}
+.ods-internal-contextual-hero__list-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 16px;
+}
+
+.ods-contextual-menu {
+  align-items: flex-start;
+  background-color: white;
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(12, 13, 20, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  left: 0;
+  list-style: none;
+  margin: 0;
+  min-width: 264px;
+  padding: 4px;
+  position: absolute;
+  scrollbar-width: none;
+  top: auto;
+  z-index: 1000;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu {
+    border-radius: 0;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    bottom: 0;
+    left: 0;
+    max-height: 0;
+    overflow: hidden;
+    padding: 0 4px 4px 4px;
+    position: fixed;
+    right: 0;
+    transform: none;
+    transition: max-height 150ms linear;
+    z-index: 1000;
+  }
+}
+.ods-contextual-menu--after-open {
+  max-height: 300px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu--after-open {
+    max-height: 73.5%;
+    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+@media (min-width: 992px) {
+  .ods-contextual-menu--before-close {
+    display: none;
+  }
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu--before-close {
+    max-height: 0;
+    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+.ods-contextual-menu__item {
+  width: 100%;
+}
+
+.ods-contextual-menu__header {
+  background-color: white;
+  display: none;
+  justify-content: flex-end;
+  list-style: none;
+  padding: 8px 4px 0 0;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__header {
+    display: flex;
+  }
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__header .ods-icon-btn--sm {
+    color: #aaadc0;
+    height: 32px;
+    min-width: 32px;
+    width: 32px;
+  }
+}
+.ods-contextual-menu__header .ods-icon-btn--sm:hover {
+  background: transparent;
+}
+
+.ods-contextual-menu__overlay {
+  display: none;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__overlay {
+    background: rgba(57, 59, 71, 0.4);
+    bottom: 0;
+    display: block;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: opacity 150ms linear;
+    z-index: 999;
+  }
+  .ods-contextual-menu__overlay--after-open {
+    opacity: 1;
+  }
+  .ods-contextual-menu__overlay--before-close {
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.ods-contextual-menu__item__button {
+  align-items: center;
+  background: white;
+  border: hidden;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  width: 100%;
+}
+.ods-contextual-menu__item__button__content {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+}
+.ods-contextual-menu__item__button__content > svg {
+  color: #aaadc0;
+}
+.ods-contextual-menu__item__button:hover {
+  background: #f3f5fe;
+  cursor: pointer;
+}
+.ods-contextual-menu__item__button:active {
+  background: #f3f5fe;
+}
+.ods-contextual-menu__item__button:focus {
+  background: #f3f5fe;
+}
+.ods-contextual-menu__item__button--primary .ods-typography__description {
+  color: #0025e0;
+}
+.ods-contextual-menu__item__button--neutral .ods-typography__description {
+  color: #67697a;
+}
+.ods-contextual-menu__item__button--critical .ods-typography__description {
+  color: #f5456e;
+}
+.ods-contextual-menu__item__button--primary-selected, .ods-contextual-menu__item__button--neutral-selected {
+  background-color: #f3f5fe;
+}
+.ods-contextual-menu__item__button--primary-selected .ods-typography__description, .ods-contextual-menu__item__button--neutral-selected .ods-typography__description {
+  color: #0025e0;
+  font-weight: 600;
+}
+.ods-contextual-menu__item__button--critical-selected {
+  background-color: #f3f5fe;
+}
+.ods-contextual-menu__item__button--critical-selected .ods-typography__description {
+  font-weight: 600;
+}
+.ods-contextual-menu__item__button:disabled .ods-typography__description, .ods-contextual-menu__item__button--blocked .ods-typography__description {
+  color: #aaadc0;
+}
+.ods-contextual-menu__item__button:disabled:hover, .ods-contextual-menu__item__button:disabled:active, .ods-contextual-menu__item__button:disabled:focus, .ods-contextual-menu__item__button--blocked:hover, .ods-contextual-menu__item__button--blocked:active, .ods-contextual-menu__item__button--blocked:focus {
+  background: white;
+  cursor: not-allowed;
+}
+.ods-contextual-menu__item__button--with-icon {
+  gap: 8px;
+  justify-content: flex-start;
+}
+
+.ods-contextual-menu__item__button__icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.ods-contextual-menu__item__button__icon--primary svg {
+  fill: #0025e0;
+}
+.ods-contextual-menu__item__button__icon--neutral svg {
+  fill: #67697a;
+}
+.ods-contextual-menu__item__button__icon--critical svg {
+  fill: #f5456e;
+}
+.ods-contextual-menu__item__button__icon--blocked svg, .ods-contextual-menu__item__button__icon--disabled svg {
+  fill: #aaadc0;
+}
+.ods-contextual-menu__item__button__icon svg {
+  height: 16px;
+  width: 16px;
+}
 /*# sourceMappingURL=ocean.css.map */