%button {
  display: inline-block;
  padding: 0.5em 1em;
  border: none;
  border-radius: 100em;
  background-color: $color-yellow;
  color: $color-black;
  font-weight: normal;
}

.form-view {
  @extend %frame;
  padding: 1em;
}
sib-display sib-form form {
  margin: -0.5em;
  > * {
    margin: 0.5em;
  }
}
sib-form.block {
  display: block;
  > form {
    > * {
      display: block;
      margin-top: 2em;
      &:first-child {
        margin-top: 0;
      }
      &:not(sib-form-checkbox) {
        label {
          margin: 0.5em 0;
          display: block;
        }
        input,
        textarea {
          background-color: $color-grey-light;
          box-shadow: none !important;
          border: none;
          padding: 1em 2em;
        }
        input,
        select {
          height: 3em;
        }
        input,
        textarea,
        select {
          width: 100%;
        }
        textarea {
          resize: vertical;
          height: 200px;
          min-height: 3em;
        }
      }
    }
    sib-form-multiple-dropdown select {
      width: calc(100% - 2.5em);
    }
    input[type='submit'] {
      width: auto;
    }
  }
}

sib-form {
  // text like
  textarea,
  input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) {
    padding: 0.5em;
    border: none;
    @extend %shadow;
  }

  // button like
  button,
  input[type='button'],
  input[type='color'],
  input[type='file'],
  input[type='reset'],
  input[type='submit'] {
    @extend %button;
  }

  input[type='reset'] {
    display: none;
  }

  sib-form-multiple-dropdown {
    button {
      appearance: none;
      background-color: $color-white;
      color: $color-yellow;
      border: 1px solid;
      width: 1em;
      height: 1em;
      line-height: 0;
      font-size: 1.5em;
      padding: 0;
      cursor: pointer;
      margin: 0.2em;
      vertical-align: middle;
      padding: 0 0.04em 0.08em;
    }
  }
}

sib-form-label-text,sib-form-dropdown{
  //display: flex;
  //flex-wrap: nowrap;
}

select{
  background-color: $color-white;
  border-style: none;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15)
}