/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-ucla-wordpress-plugin-alert > .ucla-alert {
  border-width: 2px;
  border-style: solid;
  display: flex;
  align-items: center;
  padding: 1rem;

  & > svg {
    margin-right: 8px;
  }

  &.ucla-alert--primary {
    border-color: #8bb8e8;

    & > svg > path {
      fill: #8bb8e8;
    }
  }
  &.ucla-alert--secondary {
    border-color: #999;
    & > svg > path {
      fill: #999;
    }
  }
  &.ucla-alert--success {
    border-color: #007339;
    & > svg > path {
      fill: #007339;
    }
  }
  &.ucla-alert--warning {
    border-color: #f57f17;
    & > svg > path {
      fill: #f57f17;
    }
  }
  &.ucla-alert--error {
    border-color: #d60000;
    & > svg > path {
      fill: #d60000;
    }
  }
  .components-base-control {
    flex-grow: 1;
    &__field {
      margin-bottom: 0;
    }
  }
  input[type="text"] {
    margin: 0;
    border: 0;
    font-size: 1rem;
    appearance: none;
  }
}
