/** All of the custom styles for arXiv-NG - related to specific graphical style rather than overrides of Bulma - are placed here. **/

header
  h1
    font-size: 2em
    font-weight: bold
    padding: .25em 0 .5em
  .columns
    .column
      padding-bottom: 0

footer
  background-color: $grey
  color: #fff
  padding: 1em 2em
  h2
    margin-bottom: .5em
    text-transform: uppercase
  a
    color: #fff
    border-bottom: 1px solid transparent
    &:hover,
    &:active
      border-bottom: 1px dotted #fff
      background-color: $grey-light
  svg.icon
    height: .9rem
    width: .9rem
    margin-right: .45em
    top: 0
  .nav-spaced li
    display: flex
    align-items: center
  .sorry-app-links
    .is-link
      &:not(.button)
        border-bottom: 1px dotted #fff
    .button.is-link.is-outlined
      background-color: transparent
      border-color: #c3c3c3
      color: #ffffff
      padding: 0 .4em .1em .4em
      height: auto
      margin-bottom: .25em
    svg.icon,
    .button svg.icon,
    .button svg.icon:first-child:last-child
      margin-right: 2px
      margin-left: 2px
      top: 0.09em
    .help
      font-size: .75rem

/**** Primary content default styling ****/
main
  padding: 3rem 1.5rem
  a
    border-bottom: 1px solid transparent
    /*font-weight: bold*/
    &:hover
      border-bottom: 1px dotted $blue
  p,
  dl,
  ol,
  ul,
  blockquote,
  pre,
  table
    &:not(:last-child)
      margin-bottom: 1em
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    font-weight: 600
    margin-bottom: .8em
    &:not(:first-child)
      margin-top: 1em
  h1
    font-size: 1.75em
  h2
    font-size: 1.5em
    margin-bottom: .5em
  h3
    font-size: 1.35em
  h4
    font-size: 1.25em
  h5
    font-size: 1.15em
  ul
    list-style: disc outside
    margin-left: 2em
    ul
      list-style-type: circle
      margin-top: .5em
  ol
    list-style-position: outside
    margin-left: 2em
    margin-top: 1em
  li
    margin-bottom: .5em

.breadcrumb ul
  margin-left: 0

/**** End primary content default styling ****/

.nav-spaced
  line-height: 2
.attribution
  align-items: center
  background-color: $cul-gray
  color: #fff
  line-height: 1
  .level-left
    padding: .25em

.identity
  background-color: $cul-red
  color: #fff
  padding: 0 .75em
  a
    color: #fff
    border-bottom: 1px solid transparent
    &:visited
      color: #fff
    &:hover
      border-bottom: 1px dotted #fff
      color: #fff
  .arxiv
    margin: .5em 0
  .search-block
    margin-top: .5em
    margin-bottom: .25em

.logo
  height: 45px
  margin: .2em
  vertical-align: middle

.button.is-cul-darker
  background-color: $cul-red-darker
  color: $white
  border-color: transparent
  &:hover,
  &:active
    background-color: darken($cul-red-darker, 10%)

.sponsors
  font-size: .9em
  font-weight: 600
  line-height: 1.3
  margin: 4px
  padding-right: .75em
  text-align: right
  a
    color: #fff
    &:visited
      color: #fff
    &:hover
      background-color: $grey-light
      color: #fff

.status-code
  background-color: $black
  color: #00FF00
  font-size: 16em
  font-family: 'Courier', monospace
  font-weight: bold
  width: max-content
  line-height: 1em
  padding: .1em .25em
  margin-left: auto !important
  margin-right: auto !important

.beta
  &::after
    content: '\03b2'
    color: $grey-lighter
    font-size: 25em
    position: absolute
    top: 0
    left: 0
    line-height: .75em
    font-family: serif
    z-index: -10

.is-monospace
  font-family: monospace

/* specific styles for search lists with classic dl/dt/dd structure and classes */
.list-identifier
  font-weight: 600

.list-title
  font-size: 1.25em
  font-weight: 600

dt
  margin-top: 1em

/* utility styles for forms */
.fieldset
  border: 1px solid $grey-lighter
  border-radius: $radius-small
  padding: .5em 1em 1em 1em
  margin: 1em 0

.fieldset.is-warning
  border: 1px solid #d47500

.fieldset.is-danger
  border: 1px solid #cd0200

.legend
  font-weight: $weight-semibold
  background-color: inherit
  padding: 0 .5em
  margin-left: -.5em

.is-baseline
  align-items: baseline

.is-centered-vertically
  margin-top: auto !important
  margin-bottom: auto !important

.is-datefield
  max-width: 8rem

.is-short-field
  max-width: 25rem

/* table and file tree styles */

.is-subdirectory
  margin-left: 2em

li.is-danger
  background-color: #fff5f5
  color: #970503
  border: 1px solid #cd0200
  padding: 2px
  p
    padding-left: 2em
    &:before
      content: '\f071'
      font-family: 'FontAwesome'
      color: #cd0200
      position: relative
      left: -.5em

li.is-warning
  background-color: #fffaf5
  color: #5d3605
  border: 1px solid #d47500
  padding: 2px
  p
    padding-left: 2em
    &:before
      content: '\f071'
      font-family: 'FontAwesome'
      color: #d47500
      position: relative
      left: -.5em

li.is-success
  background-color: #f8fdf6
  color: #1F6B0E
  border: 1px solid #3CB521
  padding: 2px
  p
    padding-left: 2em
    &:before
      content: '\f058'
      font-family: 'FontAwesome'
      color: #1F6B0E
      position: relative
      left: -.5em

/* whitespace styles */
.breathe-vertical
  margin-top: 4rem
  margin-bottom: 4rem

.breathe-horizontal
  @media screen and (min-width: 769px)
    margin-left: 4rem !important
    margin-right: 4rem !important
  @media screen and (min-width: 980px)
    margin-left: 6rem !important
    margin-right: 6rem !important

/* pagination styles */
.pagination
  margin-top: 3rem
  margin-bottom: 2rem

.pagination-list
  margin: 0 !important

.pagination-list li
  list-style: none

.pagination-list li + li // fixes override from content li + li
  margin: 0

/* info and help bubbles - moved from submission-ui styles for sitewide use */
.help-bubble
  position: relative
  display: inline-block
  &:hover
    .bubble-text
      visibility: visible
  &:focus
    .bubble-text
      visibility: visible
  .bubble-text
    position: absolute
    visibility: hidden
    width: 160px
    background-color: #F5FAFE
    border: 1px solid $blue
    color: $blue-dark
    text-align: center
    padding: 5px
    border-radius: 4px
    bottom: 125%
    left: 50%
    margin-left: -80px
    font-size: .8rem
    &:after
      content: " "
      position: absolute
      top: 100%
      left: 50%
      margin-left: -5px
      border-width: 5px
      border-style: solid
      border-color: $blue transparent transparent transparent

/*icon styles*/
svg.icon
  height: 1em !important
  width: 1em !important
  top: .125em
  position: relative

.filter-white
  fill: #FFFFFF
.filter-black
  fill: #000000
.filter-grey
  fill: #f5f5f5
.filter-dark_grey
  fill: #cccccc
.filter-blue
  fill: $blue-light
.filter-dark_blue
  fill: $blue
.filter-light_red
  fill: $red-light
.filter-red
  fill: $red
.filter-dark_red
  fill: $red-dark-darker
.filter-orange
  fill: $orange-light
.filter-dark_orange
  fill: $orange-dark
.filter-yellow
  fill: $yellow-light
.filter-dark_yellow
  fill: $yellow-dark
.filter-green
  fill: $green-light
.filter-dark_green
  fill: $green-dark-darker

a
  .icon
    transition: fill 0.3s ease

a:hover
  .filter-grey,
  .filter-dark_grey
    fill: #000000
  .filter-black,
  .filter-blue,
  .filter-dark_blue,
  .filter-red,
  .filter-dark_red,
  .filter-orange,
  .filter-dark_orange,
  .filter-yellow,
  .filter-dark_yellow,
  .filter-green,
  .filter-dark_green
    fill: #f5f5f5
