@import "bulma-tooltip/src/sass/index";

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

div.wrapper {
  flex: 1;
}

.footer {
  background-color: $background;
}

textarea.paste {
  font-family: monospace;
}

button.button-link {
  &.navbar-item {
    color: inherit;
    width: 100%;
    text-align: inherit;

    &:active {
      color: $navbar-dropdown-item-active-color;
      background-color: $navbar-dropdown-item-active-background-color;
    }

    &:focus {
      color: inherit;
    }

    &:hover {
      color: $navbar-dropdown-item-hover-color;
      background-color: $navbar-dropdown-item-hover-background-color;
    }
  }

  &:hover {
    color: $link-hover;
    border-color: $link-hover-border;
  }

  &:focus {
    color: $link-focus;
    border-color: $link-focus-border;
  }

  &:active {
    color: $link-active;
    border-color: $link-active-border;
  }

  color: $link;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  cursor: pointer;
}

html.js .requires-no-js {
  display: none;
}

html.no-js .requires-js {
  display: none;
}

td.hljs-ln-numbers {
  text-align: right;
}

td.hljs-ln-code {
  padding-left: .5rem !important;
}

.footer .breadcrumb {
  -webkit-touch-callout: unset;
  -webkit-user-select: unset;
  -moz-user-select: unset;
  -ms-user-select: unset;
  user-select: unset;

  li:first-child a {
    margin-left: 0;
  }

  li:last-child a {
    margin-right: 0;
  }

  a {
    padding: 0;
    margin: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal;

    &:not([href]) {
      cursor: text;
      pointer-events: unset;
    }
  }
}

.title + .info-tags, .subtitle + .info-tags {
  margin-top: -0.75rem;
}

.paste.hero-body {
  padding-bottom: 1.5rem;
}

.hero-foot .tabs {
  padding-bottom: 2px;

  & ul {
    align-items: flex-end;
  }
}

.paste.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .left {
    order: 1;
  }

  .right {
    order: 2;
  }
}

.paste-submit-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .control:not(:last-child).submit-authenticated {
    order: 2;
    margin-right: 0;
    margin-left: 0.75rem;
  }
}

.is-not-displayed {
  display: none;
}

.is-dotted-underlined {
  text-decoration: dotted underline;
}

.keeps-spaces {
  white-space: pre-wrap;
}

.right.tag {
  margin-left: .5rem;
}

a.external::after {
  display: inline-block;

  margin-left: .25rem;

  content: ' ';

  // chrome has limited support, and many slightly older versions require a prefix
  -webkit-mask-image: url("/static/svg/external.svg");
  // display the external icon as a mask of the background colour
  mask-image: url("/static/svg/external.svg");
  -webkit-mask-size: 1rem;
  mask-size: 1rem;

  width: 1rem;
  height: 1rem;

  background-color: currentColor;
}

table.is-middle td, table.is-middle th {
  vertical-align: middle;
}

.box pre.file-source {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  margin-bottom: -1.25rem;
  margin-top: -1.5rem;
  border-radius: 0 0 $radius-large $radius-large;
  white-space: pre-wrap;
}

.box .content > pre {
  margin-left: -1.25rem;
  margin-right: -1.25rem;

  white-space: pre-wrap;

  &:first-child {
    margin-top: -1.5rem;
  }

  &:last-child {
    margin-bottom: -1.25rem;
    border-radius: 0 0 $radius-large $radius-large;
  }
}

.box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 1.25rem;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  margin-right: -1.25rem;
  margin-bottom: 1.5rem;

  border-radius: $radius-large $radius-large 0 0;
  box-shadow: inset 0 -2px 0 0 $grey;

  background-color: $dark;

  .title + .tabs {
    margin-top: -1rem;
  }

  .tabs {
    margin-bottom: -1.25rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;

    ul {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
  }
}

.paste-rendered-content:not(:last-child) {
  margin-bottom: 0;
}

th, td {
  &[align=right] {
    text-align: right !important;
  }

  &[align=left] {
    text-align: left !important;
  }

  &[align=center] {
    text-align: center !important;
  }
}

// highlight-js-line-numbers

.hljs-ln {
  border-collapse: collapse;
}

.hljs-ln td {
  padding: 0;
}

.hljs-ln-n {
  color: inherit;

  &:before {
    content: attr(data-line-number);
  }
}

.paste.info {
  color: $grey;
  font-style: italic;

  :not(:first-child):not(:empty)::before {
    content: ' / ';
    color: $grey-light;
  }
}

.diffs .subtitle.hunk > * {
  flex-grow: 1;
}

.diffs .subtitle.hunk {
  margin: 0 -1.25rem;
  padding: 0;
  display: flex;

  &:first-child {
    margin-top: -1.5rem;
  }
}

#paste_upload .columns .column {
  padding-bottom: 0;
}

[data-tooltip]:not(.is-loading)::before, [data-tooltip]:not(.is-loading)::after, [data-tooltip]:not(.is-disabled)::before, [data-tooltip]:not(.is-disabled)::after, [data-tooltip]:not([disabled])::before, [data-tooltip]:not([disabled])::after {
  font-size: unset;
}

[data-tooltip].has-tooltip-multiline.has-tooltip-large:not(.disabled)::before,
[data-tooltip].has-tooltip-multiline.has-tooltip-large:not([disabled])::before,
[data-tooltip].has-tooltip-multiline.has-tooltip-large:not(.is-loading)::before {
  white-space: pre-line;
}

.label-icon {
  display: flex;

  .icon {
    &.is-right {
      margin-left: .25rem;
    }

    &.is-left {
      margin-right: .25rem;
    }
  }

  a > .icon {
    color: $grey;

    &:hover {
      color: $link-hover;
    }
  }
}

// Firefox on Android is silly
textarea.codesass__textarea {
  border-radius: 0;
}

.paste-removable-title {
  display: flex;
  align-items: center;

  input[type=checkbox] {
    margin-right: 1em;
  }
}

.select-all.dropdown {
  margin-bottom: 1rem;
}

.shared-secret > code {
  margin-right: .5rem;
}

input[type=checkbox] {
  -moz-appearance: none;
  -webkit-appearance: none;

  background-color: $grey-darker;
  border: 1px solid lighten($grey-darker, 10%);
  width: 1rem;
  height: 1rem;

  &:focus, &:active {
    border-color: lighten($grey-darker, 15%);
  }

  &:disabled {
    border-color: $grey;
  }

  &:checked::after {
    content: " ";

    border: 2px solid $grey-light;
    border-right: 0;
    border-top: 0;

    transform: rotate(-45deg);
    transform-origin: center;

    display: block;
    height: .525em;
    width: 1em;

    position: relative;
    top: 0.2625em;
    left: 0.125em;
  }

  li & {
    &:first-child {
      margin-top: -.275rem;
      margin-right: .25rem;
    }

    vertical-align: middle;
  }
}

.avatar-name {
  display: flex;
  align-items: center;

  .avatar {
    margin-right: .25rem;
  }

  .avatar.has-larger-gap {
    margin-right: 1rem;
  }

  .navbar & .avatar {
    margin-right: .5rem;

    img {
      width: auto;
    }
  }
}

.image .is-less-rounded {
  border-radius: 12.5%;
}

.file-notice {
  .box-title + & {
    margin: 0 -1.25rem; // stretch out the sides
    margin-bottom: 1.5rem; // redo the margin we're undoing below
    margin-top: calc(-1.5rem - 2px); // -2px as well for the box-shadow
    border-top: 2px solid $dark; // make up for the missing box-shadow
    padding: .5rem 1.25rem;
  }

  &.is-info {
    background-color: $info;
    color: $white;
  }
}

.icon svg {
  fill: currentColor;
  width: inherit;
  height: inherit;
}

.navbar-item .icon {
  margin: .25rem;
}

.control .icon.is-left svg {
  padding: .5rem;
}

.icon svg .badge {
  transform: scale(0.5) translate(24px, 24px);
}

.tfa.title {
  display: flex;
  align-items: end;

  .icon {
    margin-right: .5rem;
  }
}

select[name = visibility] {
  // by default, display no visibility icons
  & ~ .icon {
    display: none;
  }

  // show each icon if necessary
  // note that this could've been done using pure CSS if parent elements could be styled
  @each $visibility in public unlisted private {
    &[data-selected = #{$visibility}] ~ .icon[data-visibility = #{$visibility}] {
      display: unset;
    }
  }
}
