@import (reference) '../../styles/custom.less';
@import (reference) '../../styles/modules/variables.less';

.QuickPostEditor {
  background-color: @white;
  border-top: @base-border;
  border-bottom: @base-border;
  display: flex;
  flex-direction: column;
  margin-bottom: @content-margin;

  &__contents {
    border-radius: @border-radius-base;
    background: @white;
    display: flex;
    flex-direction: row;
    padding: 8px 16px;

    .ant-input {
      border: 0 !important;
      box-shadow: 0 0 !important;
      margin-top: 3px;
      font-size: 18px;
      resize: none;
    }
  }

  &__avatar {
    margin-right: 5px;
  }

  &__header {
    border-bottom: @base-border;
    font-size: 16px;
    font-weight: 500;
    padding: 0 10px;

    &__item {
      padding: 0 4px;

      &__selected {
        > a {
          color: @grey-mortar !important;
        }
      }
    }

    &__icon {
      font-size: 20px !important;
      margin-right: 3px;
      vertical-align: -2px;
    }
  }

  &__footer {
    align-items: center;
    border-top: @base-border;
    display: flex;
    flex-wrap: wrap;
    min-height: 56px;
    justify-content: space-between;
    padding: 5px 16px 5px 10px;

    &:focus {
      outline-width: 0;
    }

    > button {
      width: auto !important;
    }
  }

  &__dropzone-base {
    position: relative;
    width: 100%;
  }

  &__dropzone {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: 4px;
    background: fade(@primary-color, 60%);
    color: white;

    & > div {
      margin: auto;
      font-weight: 700;
      font-size: 20px;

      & > span {
        margin-left: 8px;
        vertical-align: 3px;
      }
    }
  }

  &__preview {
    min-height: 100px;
    padding: 10px;
  }

  &__imagebox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    &__preview__image {
      padding: 10px 5px 5px 5px;

      img {
        border-radius: 4px;
      }
    }

    &__loading {
      padding: 10px 5px;
      margin-top: 5px;
    }

    &__remove {
      align-items: center;
      background-color: @white;
      color: @primary-color !important;
      cursor: pointer;
      display: flex;
      height: 10px;
      justify-content: center;
      margin-left: 30px;
      margin-top: -4px;
      position: absolute;
      width: 12px;

      &__icon {
        font-size: 25px !important;
      }
    }

    &__upload {
      align-items: center;
      border-radius: 4px;
      border: 2px solid @blue-botticelli;
      display: flex;
      height: 38px;
      margin-bottom: 5px;
      margin-left: 5px;
      margin-top: 10px;
      padding: 3px;

      &__icon.icon-picture {
        color: @blue-botticelli;
        font-size: 35px !important;
      }

      &__icon.icon-add {
        color: @blue-botticelli;
        font-size: 26px !important;
      }
    }

    input {
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      width: 0.1px;
      z-index: -1;
    }

    label {
      cursor: pointer;
    }

    .anticon {
      font-size: 16px !important;
      margin-right: 8px !important;
      vertical-align: 1px;
    }
  }

  @media @small {
    border-radius: @border-radius-base;
    border: @base-border;
  }
}

div[data-dir='rtl'] .QuickPostEditor {
  &__avatar {
    margin-left: 0px;
    margin-right: 5px;
  }
}

@import 'QuickPostEditor-nightmode';
