.maze-settings {
  height: 100%;
  overflow: auto;
  font-size: $margin_medium;

  section {
    margin-bottom: $margin_big;
  }

  label {
    display: block;
  }

  input, select {
    width: 100%;
  }

  .maze-settings-label {
    margin-bottom: $margin_small;
    font-weight: bold;
  }

  .maze-settings-form-group {
    margin-bottom: $margin_medium;
  }

  .radio, .checkbox {
    display: inline-flex;

    &:not(:last-child) {
      margin-right: $margin_medium;
    }
  }

  .mazes-settings-radio-group, .mazes-settings-checkbox-group {
    display: flex;
    flex-wrap: wrap;
  }

  .maze-settings-icon-radios {
    $height: 32px;
    display: flex;

    .maze-settings-icon-radio {
      position: relative;
    }

    input:not([type="file"]) {
      background: transparent;
      opacity: 0;
      position: absolute;
      margin: 0;
      padding: 0;
      width: $height;
      height: $height;
      z-index: -1;
    }

    input:checked + label {
      border: 1px solid $black;
      background-color: $light_gray;
    }

    input {
      @include keyboard_only_focus() {
        & + label {
          @include outline();
        }
      }
    }

    label {
      flex: 0 0 auto;
      padding: $margin_small;
      cursor: pointer;
      border: 1px solid transparent;
      display: flex;
      align-items: center;

      svg {
        * {
          fill: $white;
        }
      }
    }

    svg {
      display: block;

      * {
        fill: transparent;
      }
    }
  }

  .maze-settings-custom-mask, .maze-settings-mask {
    label {
      line-height: 1.3rem;
    }
  }

  .maze-settings-mask {
    position: relative;

    input {
      &:focus {
        & + label {
          .maze-settings-mask-preview {
            display: block;
          }
        }
      }
    }

    label {
      text-align: center;
      font-size: 1.3rem;
    }

    &:hover {
      .maze-settings-mask-preview {
        display: block;
      }
    }

    .maze-settings-mask-preview {
      position: absolute;
      top: 100%;
      left: 0;
      display: none;
      padding: $margin_small;
      background: $white;
      border: 1px solid $black;

      img {
        display: block;
      }
    }
  }

  .maze-settings-size {
    display: flex;

    > * {
      display: flex;
      flex: 1 1 auto;

      &:not(:last-child) {
        margin-right: $margin_medium;
      }

      > * {
        &:not(:last-child) {
          margin-right: $margin_small;
        }
      }
    }
  }

  .maze-settings-hint {
    font-size: $font_size_s;
  }

  .maze-settings-file-upload {
    margin: $margin_medium 0;
    font-size: $font_size_s;
  }

  button[type="submit"] {
    margin-top: $margin_small;
  }
}
