/* Copyright 2017-2019 @polkadot/ui-app authors & contributors
/* This software may be modified and distributed under the terms
/* of the Apache-2.0 license. See the LICENSE file for details. */

@import './partials/_variables.css';

.ui--output {
  background: #fefefe;
  border-radius: 4px;
  border: 1px dashed #eee;
  box-sizing: border-box;
  line-height: 1rem;
  margin: 0.25rem;
  padding: .75rem 1rem;
  position: relative;
  word-wrap: break-word;

  &.error {
    background: #fff6f6;
    border-color: #e0b4b4;
  }

  &.monospace {
    font-family: monospace;
  }

  .ui--output-button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
  }
}

.ui--Button-Group .button {
  border-radius: $small-corner !important;
}

header .ui--Button-Group {
  text-align: center;
}

.ui.input .ui--Button-Group {
  margin: 0;
}

button.ui.icon.iconButton {
  padding: 0em .3em .3em .3em !important;
  color: #2e86ab  !important;
  background: none  !important;
  /*trick to let the button in the flow but keep the content centered regardless*/
  margin-left: -2em  !important;
  position: relative  !important;
  right: -2.3em  !important;
}

.editable {
  cursor: pointer;
}

.ui--DropdownLinked.ui--row {
  .small .ui.selection.dropdown {
    min-width: 5rem;
  }

  .ui--DropdownLinked-Items {
    padding-left: 0.5rem;
  }
}

.ui--Input {
  &.disabled {
    overflow: hidden;

    input {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .ui--SiDropdown {
    width: 6rem;
    text-align: center;
  }

  .ui--MaxButton {
    position: absolute;
    right: 6.5rem;
    top: 20%;
    height: 60%;
    text-transform: uppercase;
    padding: 0 0.5rem !important;
    border-radius: 0.3rem !important;
  }
}

.ui--InputFile {
  align-items: center;
  background: #fff;
  border: 1px dashed rgba(34, 36, 38, 0.15);
  border-radius: $small-corner;
  display: flex;
  font-size: 1rem;
  height: 3.5rem;
  justify-content: center;
  margin: 0.25rem 0;
  width: 100% !important;

  &.error {
    background: #fff6f6;
    border-color: #e0b4b4;
  }

  &:hover {
    background: #fefefe;
    border-style: solid;
    cursor: pointer;
  }

  .label {
    color: rgba(0, 0, 0, .6);
  }
}

.ui--Static {
  overflow: hidden;
  word-break: break-all;
}

.ui--Tooltip {
  text-align: center;
  z-index: 1002;
  max-width: 300px;
}