#cf7-creamailer-extension {
  @import '../../../node_modules/bulma/sass/utilities/all';
  @import '../../../node_modules/bulma/sass/base/helpers';
  @import '../../../node_modules/bulma/sass/elements/form';
  @import '../../../node_modules/bulma/sass/elements/tag';
  @import '../../../node_modules/bulma/sass/components/level';

  .extension-header {
    img,
    svg {
      height: 30px !important;
      width: auto;
    }
  }

  .level {
    flex-wrap: wrap;

    .field {
      padding: 10px;
      width: 100%;

      select,
      .select {
        width: 100%;
      }
    }
  }

  .level-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
    grid-auto-rows: minmax(1fr, auto);

    &-item {
      width: auto;
      * {
        width: 100%;
      }
    }

    @media screen and (max-width: 1180px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .field {
    margin-bottom: 0.5rem;

    input {
      &[type='text'],
      &[type='password'] {
        width: 100%;
      }
    }

    &.is-required {
      .label::after {
        content: '*';
        color: #f00;
        display: inline-block;
      }

      &.is-danger {
        .input,
        .select select {
          border-color: #f00;
        }
      }
    }

    .label {
      font-weight: 600;
    }

    .help {
      margin: 5px 0 1em;
    }

    &.label-after-control {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      .label {
        order: 1;
      }

      .help {
        order: 2;
        width: 100%;
        flex: 1;
      }
    }
  }

  fieldset {
    .level {
      margin-bottom: 0 !important;
    }
  }

  .log {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid black;
    border-radius: 2px;

    .items {
      margin: 0;

      .item {
        word-wrap: break-word;
        white-space: nowrap;
        padding: 0.25rem 0;
        line-height: 180%;
        margin: 0;

        &:not(:last-child) {
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}
