@import "../../stylesheets/_variables.scss"; .woocommerce-marketplace { &__notice { align-items: center; border: 1px solid #f0f0f0; box-shadow: 0 2px 6px 0 #0000000d; display: flex; gap: 12px; margin-bottom: 32px; opacity: 1; padding: 12px; transition: opacity 1s ease-out; &--info { border-left: 4px solid var(--wp-admin-theme-color, #007cba); } &--error { border-left: 4px solid $alert-red; } &--warning { border-left: 4px solid $alert-yellow; } &--success { border-left: 4px solid $valid-green; } &-icon { align-self: flex-start; height: 24px; &--info { fill: var(--wp-admin-theme-color, #007cba); } &--error { fill: $alert-red; } &--warning { fill: $alert-yellow; } &--success { fill: $valid-green; } } &-content { align-items: flex-start; display: flex; flex-direction: column; flex: 1; gap: 12px; } &-description { color: $gray-900; font-size: 13px; font-weight: 400; line-height: 20px; margin: 0; } &-children { color: $gray-900; font-size: 13px; font-weight: 400; gap: 8px; line-height: 20px; margin: 0; .components-button { margin-right: 12px; } } &-close { align-self: flex-start; background: none; border: none; cursor: pointer; height: 24px; } } } @media only screen and (min-width: 600px) { .woocommerce-marketplace__notice { margin-bottom: 40px; } }