.o2-svg-field {
  &.o2-svg-field-large {
    .o2-svg-field-render {
      width: 250px;
      height: 250px;
    }
  }

  &.o2-svg-field-medium {
    .o2-svg-field-render {
      width: 120px;
      height: 120px;
    }
  }

  &.o2-svg-field-small {
    .o2-svg-field-render {
      width: 40px;
      height: 40px;
    }

    .o2-svg-field-details-options,
    .o2-svg-field-editor-options {
      display: block;
      button {
        margin-right: 6px;
      }
    }
  }
}

.o2-svg-field-unselected {
  font-size: 14px;
  .o2-svg-field-add {
    margin-right: 6px;
  }
}

.o2-svg-field-editor,
.o2-svg-field-details {
  display: flex;
}

.o2-svg-field-textarea {
  width: 200px;
  height: 120px;
  margin-right: 12px;
}

.o2-svg-field-editor-options,
.o2-svg-field-details-options {
  display: flex;
  flex-direction: column;
}

.o2-svg-field-render {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  flex-shrink: 0;
  border: $border;
  padding: 4px;
  word-break: break-all;
  overflow: hidden;
  background: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="8" height="8" fill="%23D9D9D9"/><rect x="8" y="8" width="8" height="8" fill="%23D9D9D9"/><rect x="8" width="8" height="8" fill="white"/><rect y="8" width="8" height="8" fill="white"/></svg>')
    center;

  svg {
    width: 100%;
    height: 100%;
  }
}
