/*
 *   Copyright (C) 2020 CERN.
 *   Copyright (C) 2020 Northwestern University.
 *   Copyright (C) 2021 Graz University of Technology.
 *   Copyright (C) 2021 New York University.
 *
 * Invenio RDM Records is free software; you can redistribute it and/or modify
 * it under the terms of the MIT License; see LICENSE file for more details.
 */

@import "./landing_page/creatibutors.less";
@import "./landing_page/details.less";
@import "./landing_page/sidebar.less";

.main-record-content {

  #record-info {
    .right.floated.right.aligned.column {
      padding: 1rem;
    }
  }

  .back-navigation {
    margin-bottom: 1rem;
    padding: 0;
  }

  #record-title-section {
    margin: 1.5em 0 0 0 ;
  }

  h1,
  h1.ui.header {
    font-size: 2rem;
  }

  h2,
  h2.ui.header {
    font-size: 1.5rem;

    &:not(:first-child) {
      margin-top: 2.5rem;
    }
  }

  h3,
  h3.ui.header {
    font-size: 1.2rem;
  }

  h4,
  h4.ui.header {
    font-size: 1rem;
  }
}

.section-spacing {
    margin-top: 2.5rem;
}

.font-small {
  font-size: @font-size-small
}

.font-tiny {
  font-size: @font-size-tiny
}

.top-bottom-padded {
  margin: 15px 0px 20px 0px;
}

a.identifier-link:hover {
  text-decoration: none;
}

// Preview
.iiif-preview-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.preview-iframe {
  display: block;
  border-style: none;
}

// Record info

.ui.label > .icon {
  //Overwrite default icon
  margin: 0rem 0.25rem 0rem 0rem;
}

.stats-box {
  padding: 1rem 0rem 0rem 0rem;

  .stats-data {
    font-size: @font-size-massive;
  }
}

dd {
  // Start left aligned
  margin-inline-start: 0px;
}

.text-muted-on-bg {
  color: #4A4A4A;
}

.versions {
  .ui.grid.preview-message {
    margin: -0.5rem 0;

    & + .ui.grid.dots .centered.row {
      padding-top: 0;
    }
  }

  .ui.divided.list .item {
    padding: 1rem;

    .doi {
      display: block;
      margin-top: .5rem;
      word-wrap: break-word;
    }
  }

  .version-active {
    background-color: @versionActive;
  }

  .ui.grid.all-versions-link {
    margin-top: 0;
  }
}

.thin-line {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

// Files toggles

.hide-on-collapsed {
  display: block;
}

.show-on-collapsed {
  display: none;
}

.panel-toggle.collapsed {
  .hide-on-collapsed {
    display: none;
  }

  .show-on-collapsed {
    display: block;
  }
}

// Preview view
.column.versions-preview-info {
  padding: 0em !important;
}


/* use these classes to change accordion title when up/down */
div.accordion div.title.active span.up,
div.accordion div.title.active button.up {
  display: none;
}

div.accordion div.title.active span.down,
div.accordion div.title.active button.down {
  display: inline-grid;
}

div.accordion div.title span.up,
div.accordion div.title button.up {
  display: inline-grid;
}

div.accordion div.title span.down,
div.accordion div.title button.down {
  display: none;
}

h2#record-management-header {
  display: inline-block;
  font-size: @font-size-base;
  margin: 0 0 0 3px;
  font-weight: normal;
}

.record-management-row {
  margin-top: 10px;

  button {
    margin-right: 7px !important;
  }
}

.panel-spacing {
  padding-top: 0px;
  padding-bottom: 20px;
}

.file-box-message {
  box-shadow: none !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  margin: 0 !important;
}

.panel-heading {
  padding: 10px !important;
  border-radius: 10px;
  background-color: #f5f5f5;
  color: #428bca !important;

  &.active {
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #ddd;
  }
  a {
    text-decoration: none;
  }

  i {
    &.angle {
      float: right !important;
    }
  }

  &.restricted {
    background-color: @restricted-components-background-color;
  }

  &.embargoed {
    background-color: @embargoed-components-background-color;
  }
}

.panel {
  margin-bottom: 10px;
  border-radius: 10px;
  border-color: #ddd !important;
  border: 1px solid;

  .content {
    padding-top: 0px !important;
  }
}

.ui.accordion.panel {
  &.restricted {
    border-color: @restricted-components-border-color  !important;
  }

  &.embargoed {
    border-color: @embargoed-components-border-color  !important;
  }
}

.ui.table.files-table {
  border: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  table-layout: fixed;
  width: 100%;

  th.hidden {
    color: transparent;
    user-select: none;
  }
}

.share-modal {
  .share-content {
    display: flex;

    .input {
      flex-grow: 1;
      padding-right: 0.5em;
    }
  }

  .share-description {
    margin: 1em auto;
  }
}

.ui.accordion.creatibutors {
  .title {
    cursor: default;
  }
}

.truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .ui.selection.dropdown {
    min-width: 0px;
    width: 14em;
    margin-right: 0.5em;
    flex-grow: 1;
  }

  .ui.export.button {
    margin: 0px;
  }
}

dl.details-list {
  margin: 1.5rem 0;

  &:last-child {
    margin-bottom: 0px;
  }

  dt.ui.tiny.header {
    margin-bottom: 0.5rem;
  }

  dd {
    &:not(:last-child) {
      margin-bottom: 0.5rem;
    }

    div:not(:last-child) {
      margin-bottom: 0.25rem;
    }
  }

  &.subjects dd {
    display: inline-block;
    margin-bottom: .4rem;
    margin-right: .1rem;

    &:last-child {
      margin-bottom: 0;
      margin-right: 0;
    }
  }
}

.language {
  font-size: @font-size-base;
  font-weight: normal;
}

#upload-info {
  width: 100%;
  position: relative;

  &::before {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid #cacaca;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;

    @media screen and (max-width: @mobileBreakpoint) {
      display: none;
    }
  }

  dl {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 1.5rem;

    @media screen and (max-width: @mobileBreakpoint) {
      margin: -1.5rem;
    }

    div.table-row {
      display: inline-block;
      width: max-content;

      @media screen and (max-width: @mobileBreakpoint) {
        display: block;
      }

      &:first-child {
        padding-right: 1.5rem;
      }

      dt, dd {
        display: inline-block;
        color: #777;
      }

      dt {
        font-weight: bold;
      }
    }
  }
}

#jump-btn {
  margin-top: 1rem;
}
