.woocommerce-list { margin: 0; padding: 0; } .woocommerce-list__item { display: flex; align-items: center; margin-bottom: 0; &.has-action { cursor: pointer; } > .woocommerce-list__item-inner { text-decoration: none; width: 100%; display: flex; align-items: center; padding: $gap $gap-large; &:focus { box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white; } } .woocommerce-list__item-title { color: $studio-gray-90; } .woocommerce-list__item-content { margin-top: $gap-smallest; display: block; font-size: 14px; line-height: 20px; color: #50575d; } .woocommerce-list__item-before { margin-right: 20px; display: flex; align-items: center; } .woocommerce-list__item-after { margin-left: $gap; display: flex; align-items: center; margin-left: auto; } $chevron-color: $gray-900; $background-color: $white; $background-color-hover: $gray-100; $border-color: $gray-100; $foreground-color: var(--wp-admin-theme-color); $foreground-color-hover: var(--wp-admin-theme-color); background-color: $background-color; &:not(:first-child) { border-top: 1px solid $border-color; } &:hover { background-color: $background-color-hover; .woocommerce-list__item-title { color: $foreground-color-hover; } .woocommerce-list__item-before > svg { fill: $foreground-color-hover; } } .woocommerce-list__item-title { color: $foreground-color; } .woocommerce-list__item-before > svg { fill: $foreground-color; } .woocommerce-list__item-after > svg { fill: $chevron-color; } &.is-complete { .woocommerce-task__icon { background-color: var(--wp-admin-theme-color); } .woocommerce-list__item-title { color: $gray-700; } .woocommerce-list__item-content { display: none; } } } .woocommerce-list__item-title { color: $studio-gray-80; } .woocommerce-list__item-content { color: $studio-gray-50; } .woocommerce-list__item-enter { opacity: 0; max-height: 0; transform: translateX(50%); } .woocommerce-list__item-enter-active { opacity: 1; max-height: 100vh; transform: translateX(0%); transition: opacity 500ms, transform 500ms, max-height 500ms; } .woocommerce-list__item-exit { opacity: 1; max-height: 100vh; transform: translateX(0%); } .woocommerce-list__item-exit-active { opacity: 0; max-height: 0; transform: translateX(50%); transition: opacity 500ms, transform 500ms, max-height 500ms; }