/* Import Bulma to set variables */
@import "../node_modules/bulma/sass/utilities/_all";

/* import inter-regular */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('assets/fonts/Inter-Regular.woff2') format('woff2'),
}

/* import inter-600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('assets/fonts/Inter-Bold.woff2') format('woff2'),
}

$body-family: "Inter", "Helvetica Neue", sans-serif;
$body-size: 15px;
$background: $white-bis;
$body-background-color: $white-bis;
$primary: #1b3a5b;
$green: #36995b;
$turquoise: $green;
$red: #FF5722;

$link: $primary;
$input-placeholder-color: $grey-light;
$grey-lightest: #f3f3f3;

$colors: map-merge($colors, (
    "turquoise": ($green, $green-invert),
    "green": ($green, $green-invert),
    "success": ($green, $green-invert),
    "danger": ($red, $green-invert),
));

$sidebar-box-shadow: none;
$sidebar-width: 240px;
$menu-item-active-background-color: $white-bis;
$menu-item-active-color: $primary;


/* Buefy */
$modal-background-background-color: rgba(0, 0, 0, .30);

.line-chart {
  min-height: 300px;
}

/* Import full Bulma and Buefy */
@import "bulma";
@import "buefy/src/scss/buefy";

/* Custom style overrides */
html, body {
  height: 100%;
}

code {
  color: $grey;
}

pre {
  background: none;
  border: 1px solid $grey-lightest;
}

ul.no {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.relative {
  position: relative;
}

.content pre {
  white-space: pre-wrap;
}

section {
  &.wrap {
    max-width: 1100px;
  }

  &.section-mini {
    max-width: 500px;
  }
}

.spinner.is-tiny {
  display: inline-block;
  height: 10px;
  width: 10px;
  position: relative;

  .loading-overlay {
    .loading-background {
      background: none;
    }
    .loading-icon::after {
      width: 10px;
      height: 10px;
      top: 0;
      left: 0;
      position: static;
    }
  }
}

.is-disabled {
  opacity: 0.30;
}

.b-checkbox.checkbox:hover input[type="checkbox"]:not(:disabled) + .check.is-primary:hover {
  border-color: $primary;
}
.b-checkbox.checkbox input[type="checkbox"]:checked + .check.is-primary {
  border-color: $primary;
  background-color: $primary;
}

.has-text-primary {
  color: $primary !important;
}

.box {
  background: $white;
  box-shadow: 2px 2px 0 #f3f3f3;
  border: 1px solid #e6e6e6;
}
  .box hr {
    background-color: #efefef;
  }

.navbar-item.user {
  .navbar-link:not(.is-arrowless)::after {
    margin-top: -0.6rem;
  }

  .user-name {
    display: block;
    min-width: 150px;
  }
}

.navbar-dropdown {
  font-size: 1rem;
}

.user-avatar {
  img {
    display: inline-block;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    max-height: none;
  }
  span {
    background-color: #ddd;
    border-radius: 100%;
    width: 32px;
    height: 32px;
    text-align: center;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: bold;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.copy-text {
  color: inherit;
  .icon {
    visibility: hidden;
  }

  &:hover {
    color: $primary;
    .icon {
      visibility: visible;
    }
  }
}

.spaced-links a {
  margin-right: 15px;
  display: inline-block;
}

/* Two column sidebar+body layout */
#app {
  min-height: 100%;
  .wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    margin-top: 0px;
  }

  .sidebar {
    flex-shrink: 1;
    box-shadow: 0 0 3px $grey-lighter;
    background: $white;
  }

  .main {
    background: $white;
    margin-left: 15px;
    padding: 30px;
    flex-grow: 1;
    position: relative;
  }
}

.navbar {
  box-shadow: 0 0 3px $grey-lighter;
}
.navbar-brand {
  padding: 0 0 0 25px;
  .favicon {
    display: none;
  }
  .full {
    max-height: 17px;
    margin-top: 15px;
  }
  .favicon {
    margin-top: 12px;
    max-height: 24px;
  }
}

.b-sidebar {
  position: sticky;
  top: 75px;

  .sidebar-content {
    background: transparent;
  }
  .menu-list {
    .router-link-exact-active {
      border-right: 5px solid $primary;
      outline: 0 none;
    }
    li ul {
      margin-right: 0;
    }
    > li {
      margin-bottom: 10px;
      a {
        padding-left: 25px;
      }
    }
    a {
      border-radius: 0;
    }
    .icon {
      margin-right: 8px;
    }
  }
}

/* Fix for sidebar jumping on modals */
body.is-noscroll {
  position: static;
  overflow-y: visible;
  width: auto;
}

/* Global notices */
.global-notices {
  margin-bottom: 30px;
}
.notification {
  padding: 10px 15px;
  border-left: 10px solid #eee;

  &.is-danger {
    background: $white-ter;
    color: $black;
    border-left-color: $red;
  }
  &.is-success {
    background: $white-ter;
    color: $black;
    border-left-color: $green;
  }
  &.is-info {
    background: $white-ter;
    border-left-color: $primary;
    color: $grey-dark;
  }
}

/* WYSIWYG / HTML code editor */
.plain-editor textarea, .code-editor {
  position: relative;
  width: 100%;
  min-height: 250px;
  height: 65vh;
  border: 1px solid $grey-lighter;
  border-radius: 2px;

  .cm-editor {
    height: 100%;
  }
}

.code-editor {
  .cm-lineNumbers .cm-gutterElement{
    color: #aaa;
    font-size: 0.875rem;
    padding-right: 10px;
  }
  .cm-gutters {
    margin-right: 10px;
  }
}

.alt-body textarea {
  height: 30vh;
}

.editor {
  margin-bottom: 30px;

  .copy-visual-template-list {
    select {
      min-width: 200px;
    }
  }
}

.richtext-editor {
  .tox-tinymce {
    height: 100%;
    box-shadow: 2px 2px 0 #f3f3f3;
    border: 1px solid #e6e6e6;
    border-radius: 3px;

    .tox-toolbar__primary {
      border-color: #e6e6e6 !important;
    }
  }
  .tox-statusbar__branding {
    display: none;
  }
  .tox .tox-statusbar {
    border: 0;
  }

  .tox-tinymce--toolbar-sticky-on .tox-editor-header {
    padding-top: 48px !important;
  }
}

.tox.tox-silver-sink {
  z-index: 850;

  .tox-dialog-wrap {
    z-index: 900;
  }
  .tox-dialog {
    @extend .box;
  }

  .tox-track-link {
    display: block;
    cursor: pointer;

    margin: 5px 0 10px 0;
    input {
      margin-right: 5px;
    }
  }

  .tox-button {
    border-radius: 4px;
  }
  .tox-button:not(.tox-button--secondary):not(.tox-button--naked) {
    background: $primary;
  }

  .tox-textfield {
    box-shadow: 2px 2px 0 $white-ter;
    border: 1px solid $grey-lighter;
  }
}

.tox, .tox-tinymce, .tox-tinymce-aux, .tox .tox-button, .tox .tox-button-link, .tox .tox-dialog__title,
  .tox .tox-textfield,
  .tox .tox-toolbar-textfield,
  .tox .tox-listboxfield .tox-listbox--select,
  .tox .tox-textarea,
  .tox .tox-selectfield select {
    /* All TinyMCE components */
    font-family: $body-family !important;
  }

/* Table colors and padding */
.main table {
  thead th {
    background: $white-bis;
    border-bottom: 1px solid $grey-lighter;
  }
  thead th, tbody td {
    padding: 15px 10px;
    border-color: $grey-lightest;
  }

  .actions a, .actions .a {
    margin: 0 10px;
    display: inline-block;
  }
  .actions a[data-disabled],
  .actions .icon[data-disabled] {
    pointer-events: none;
    cursor: not-allowed;
    color: $grey-light;
  }

  td {
    .fields {
      font-size: $size-7;

      p {
        line-height: 0.775rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

      label {
        font-weight: bold;
        text-align: left;
        padding-bottom: 6px;
        min-width: 100px;
      }
      span {
        display: inline-block;
      }
      [class*=" mdi-"]::before {
        margin-left: 0;
      }
    }

  }
}

/* Modal */
.modal {
  z-index: 950;

  &.has-overflow {
    overflow: auto !important;
    .modal-content {
      overflow: visible !important;
    }
    .modal-card {
      overflow: visible !important;
    }
    .modal-card-body {
      overflow: visible !important;
    }
  }
}
.modal-background {
  background: rgba(241, 241, 241, 0.7);
}
.modal-content, .modal.dialog .modal-card {
  background: $white;
  box-shadow: 0 0 10px #ddd;
  border: 1px solid #ddd;
  padding: 0;
  border-radius: 5px;
}
.modal-card-head {
  display: block;
  border-bottom: 0;
}
.modal-card-body {
  padding: 30px 20px;
}
.modal .modal-card-foot {
  background: none;
  justify-content: flex-end;
  border-top: 0;
}
.modal .modal-card-foot button {
  flex-grow: 1;
  &.is-primary {
    font-weight: bold;
  }
}
.modal .modal-close.is-large {
  display: none;
}


/* Table */
.b-table .level-left {
  min-width: 60%;
  display: block;

  .actions .a {
    display: inline-block;
    margin-right: 30px;
  }
}


/* Fix for input colours */
.button {
  &.is-primary {
    background: $primary;

    &:hover, &:active {
      background: darken($primary, 15%);
    }
    &:disabled {
      background: $grey-light;
    }
    &:focus:not(:active), &.is-focused:not(:active) {
      box-shadow: 0 0 0 0.2em rgba($primary, 0.25);
    }

    .has-kbd {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .kbd {
      font-size: 0.575rem;
      font-family: monospace;
      color: #cbdefa;
      border: 1px solid #5381c5;
      border-radius: 3px;
      padding: 1px 5px;
      display: inline-block;
      border-width: 1px 2px 2px 1px;
    }
  }

  &.is-light.is-outlined {
    background: lighten($primary, 55%);

    &.is-focused {
      background: lighten($primary, 55%);
    }

    &.is-selected {
      border-color: $primary;
      color: $primary;
      font-weight: bold;
    }
  }

  &:not(.is-small) {
    height: auto;
    padding: 10px 20px;
  }
}

.button.is-primary[disabled] {
  border-color: $grey-light;
}
.has-addons {
  .controls .button.is-primary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .input:hover {
    box-shadow: none;
  }
}

.autocomplete {
  .dropdown-content {
    background-color: $white-bis;
    border: 1px solid $primary;
  }
  a.dropdown-item {
    font-size: $size-6;
    &:hover, &.is-hovered {
      background-color: $grey-lightest;
      color: $primary;
    }
  }
  .dropdown-menu {
    top: 92%;
  }
  .dropdown-menu.is-opened-top {
    top: auto;
    bottom: 92%;
  }
}

.input, .taginput .taginput-container.is-focusable, .textarea {
  box-shadow: 2px 2px 0 $white-ter;
  border: 1px solid $grey-lighter;
}

.select:not(.is-multiple) {
  height: auto;
}

.input, .select select {
  height: auto;
  padding: 10px 12px;
}
  .control.has-icons-left .icon.is-left {
    height: 3rem;
  }

.taginput .taginput-container .autocomplete {
  input {
    padding: 16px 32px 17px 32px;
  }

  .control.has-icons-left .icon.is-left {
    height: 2rem;
  }
}

/* Form fields */
.field {
  &:not(:last-child) {
    margin-bottom: 2rem;
  }

  .control {
    position: relative;

    .help.counter {
      position: absolute;
      top: -20px;
      right: 0;
    }
  }

  label {
    color: $grey-dark;
  }

  &.is-floating-label label.label {
    background-color: $white;
    font-size: 0.875rem;
  }

  .help {
    color: $grey;
  }
}
.has-numberinput .field, .field.is-grouped {
  margin-bottom: 0;
}
.b-numberinput.field.is-grouped div.control {
  flex-grow: 0;
}

/* Tabs */
.b-tabs {
  .tab-content {
    padding: 30px 20px;

    border: 1px solid #ddd;
    border-width: 0 1px 1px 1px;
    border-radius: 5px;

    box-shadow: 2px 2px 0 #f3f3f3;
  }

  ul[role=tablist] {
    margin-left: 0;
  }
}

/* Tags */
.tag {
  border-radius: 30px !important;
  border: 0;
  padding: 0 20px !important;

  &.is-small {
    font-size: 0.65rem;
    background: $white-ter;
    // border: 1px solid $white-ter;
    padding: 3px 5px;
    min-width: auto !important;
  }

  &:not(body) {
    background-color: #eee;
    font-size: 0.85em;
    color: $grey;
  }

  &.private, &.scheduled, &.paused, &.tx, &.api {
    $color: #ed7b00;
    color: $color;
    background: lighten($color, 47);
  }
  &.public, &.running, &.list, &.campaign, &.user, &.primary {
    $color: $primary;
    color: lighten($color, 20%);
    background: #e6f7ff;
  }
  &.finished, &.enabled, &.status-confirmed {
    color: $green;
    background: #dcfce7;
  }
  &.blocklisted, &.cancelled, &.status-unsubscribed, &.campaign_visual {
    $color: $red;
    color: $color;
    background: #fff1f0;
  }

  sup {
    font-weight: $weight-semibold;
    letter-spacing: 0.03em;
  }
  &.unsubscribed sup {
    color: #fa8c16;
  }
  &.confirmed sup {
    color: #52c41a;
  }

  &:not(body) .icon:first-child:last-child {
    margin-right: 1px;
  }
}


/* Page header */
.page-header {
  .buttons {
    justify-content: flex-end;
  }
}

.page-404 h1 {
  font-size: 100px;
}

/* Dashboard */
section.dashboard {
  .title {
    margin-bottom: 0.5rem;
  }

  .tile.notification {
    @extend .box;
    padding: 10px;
  }

  .counts .column {
    padding: 30px;
  }

  .level-item {
    background-color: $white-bis;
    padding: 30px;
    margin: 10px;

    &:first-child, &:last-child {
      margin: 0;
    }
  }

  label {
    font-weight: bold;
    display: inline-block;
    min-width: 50px;
    text-align: right;
  }

  .charts {
    min-height: 200px;
  }

  .notification {
    border-width: 0;
  }
}

/* Lists page */
section.lists {
  td {
    .tag {
      min-width: 65px;
    }
  }

  .view {
    display: block;
    color: $grey-light;

    &:hover {
      color: $primary;
    }
  }
}

/* List selector */
.list-tags {
  margin-bottom: 1rem;

  .is-restricted {
    opacity: 0.6;
    font-style: italic;
  }
}

/* Subscribers page */
.subscribers {
  .subscribers-controls .buttons {
    margin-top: 15px;
  }

  .toggle-advanced {
    margin-top: 10px;
  }

  .blocklisted {
    color: red;
  }

  td.link-click-url {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.b-table.subscriptions {
  overflow-y: scroll;
  max-height: 250px;

  thead th, tbody td {
    padding: 10px;
  }

  td.status .tag {
    width: 100%;
  }
}

.bounces {
  tr.detail td {
    max-width: 0;
  }
  pre {
    padding: 5px 10px;
    overflow-x: auto;
    max-width: 100%;
  }
  .blocklisted {
    color: red;
  }
}

/* Import page */
section.import {
  .delimiter input {
    max-width: 100px;
  }
  .status {
    padding: 60px;
  }
  .log-view .lines {
    max-height: 240px;
    text-align: left;
  }
}

/* Campaigns page */
section.campaigns {
  table tbody {
    .spinner {
      margin-left: 10px;
      .loading-overlay .loading-icon::after {
        border-bottom-color: lighten(#1890ff, 30%);
        border-left-color: lighten(#1890ff, 30%);
      }
    }

    tr.running {
      background: lighten(#1890ff, 43%);
      td {
        border-bottom: 1px solid lighten(#1890ff, 30%);
      }
    }

    td {
      .tags {
        margin-top: 5px;
      }

      &.lists ul {
        // font-size: $size-7;
        list-style-type: circle;
      }

      &.draft {
        color: $grey-lighter;
      }

      .progress-wrapper {
        .progress.is-small {
          height: 0.4em;
        }
        display: inline-block;
      }
    }
  }
}

section.analytics {
  .charts {
    position: relative;
    min-height: 100px;
  }

  .chart {
    margin-bottom: 100px;
    max-width: 100%;
  }

  .donut-container {
    position: relative;
  }
}

.chart canvas {
  height: 400px;
  max-width: 100%;
}

/* Campaign / template preview popup */
.preview {
  padding: 0;

  /* Contain the spinner background in the content area. */
  position: relative;

  #iframe {
    border: 0;
    width: 100%;
    max-height: 100%;
    min-height: 70vh;
    padding: 0;
    margin: 0 0 -5px 0;
  }
}

/* Media gallery */
.media-files {
  img {
    border-radius: 3px;
    max-width: 170px;
    max-height: 170px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;

    .item:hover & {
      transform: scale(1.05);
    }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .item {
    background: $white;
    box-shadow: 2px 2px 0 #f3f3f3;
    border: 1px solid #e6e6e6;

    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 2px 2px 5px #eee;

      .actions {
        opacity: 1;
      }
    }
  }

  .thumb {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
  }

  .thumb-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .thumb-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
  }

  .thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $grey-dark;
    color: white;
  }

  .file-ext {
    text-transform: uppercase;
  }

  .actions {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;

    .item:hover & {
      opacity: 1;
    }
  }

  .info {
    padding: 10px;

    .filename {
      margin-bottom: 5px;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .date {
      font-size: 0.75rem;
      color: $grey-light;
      margin-bottom: 0;
    }
  }
}

/* Template form */
.templates {
  td .tag {
    min-width: 100px;
  }
}
.template-modal {
  .template-modal-content {
    height: 95vh;
    max-height: none;
  }
  .textarea {
    max-height: none;
    height: 55vh;
  }
}

/* Settings */
.settings {
  .settings-wrap {
    max-width: 1240px;
  }

  .settings-tabs {
    flex-wrap: nowrap;

    > .tabs {
      flex: 0 0 230px;

      a {
        border: 0;
      }
      li.is-active {
        background: $grey-lightest;
        border-left: 5px solid $primary;
        border-bottom: 0;
        color: inherit;
      }
    }

    > .tab-content {
      border: 0;
      box-shadow: none;
      padding: 0 0 0 45px;
      min-width: 0;
    }
  }

  .disabled {
    opacity: 0.30;
  }
  .box {
    margin-bottom: 30px;
  }
  .code-editor {
    height: 20vh;
    min-height: 350px;
  }
}

/* Logs */
.log-view {
  .lines {
    height: 70vh;
    overflow-y: scroll;
    font-family: monospace;
    font-size: 0.90rem;

    padding: 15px;
    border: 1px solid $grey-lightest;

    .line {
      display: block;
      margin-bottom: 2px;
    }

    .timestamp, .file {
      color: $primary;
      display: inline-block;
      min-width: 175px;
      margin-right: 5px;
      user-select: auto;
    }
    .timestamp {
      margin-right: 15px;
    }

    .line:hover {
      background: $white-bis;
    }
  }
}

/* Users */
section.users {
  td .tag {
    margin: 0 3px;
  }
}
.user-api-token .copy-text {
  background: rgba($green, .1);
  display: block;
  width: 100%;
  border-radius: 3px;
  padding: 15px;
  font-size: 1.2rem;
  color: $green;
}

.permissions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  label {
    flex: 1 1 45%;
    max-width: 45%;
    display: flex;
  }
}

th.role-toggle-select a {
  font-weight: normal;
}

/* C3 charting lib */
.c3 {
  .c3-text.c3-empty {
    font-family: $body-family;
    font-size: $size-6;
  }
  .c3-chart-lines .c3-line {
    stroke-width: 2px;
  }
  .c3-axis-x .tick line,
  .c3-axis-y .tick line {
    display: none;
  }
  text {
    fill: $grey;
    font-family: $body-family;
    font-size: 11px;
  }
  .c3-axis path, .c3-axis line {
    stroke: #eee;
  }

  .c3-tooltip {
    @extend .box;
    padding: 10px;
    empty-cells: show;
    opacity: 0.95;

    tr {
      border: 0;
    }
    th {
      background: $white;
    }
  }
}

/* Vue animations */
.slide-enter-active, .slide-leave-active {
  transition: opacity 50ms;
  max-height: none;
}
.slide-enter, .slide-leave-to {
  transition: opacity 50ms;
  opacity: 0;
  max-height: none;
}
.slide-leave-active, .slide-leave-to {
  transition: none;
  display: none;
}


/* Toasts */
.notices {
  .toast {
    @extend .box;
    border-left: 15px solid $grey;
    border-radius: 3px;
    padding: 20px;

    &.is-danger {
      background: $white;
      border-left-color: $red;
      color: $grey-dark;
    }
    &.is-success {
      background: $white;
      border-left-color: $green;
      color: $grey-dark;
    }
  }
}

@media screen and (max-width: 1500px) {
  .b-table {
    .top.level {
      display: block;
    }
  }
  .b-table .level-left {
    display: block;
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 1100px) {
  html, body {
    overflow-x: auto;
  }

  #app .main {
    margin-left: 5px;
    padding: 30px 20px 30px 20px;
  }

  .navbar-brand {
    .full {
      display: none;
    }
    .favicon {
      display: block;
    }
    padding-left: 10px;
  }

  .b-sidebar {
    top: 30px;
  }

  /* Hide sidebar menu captions on mobile */
  .b-sidebar .sidebar-content.is-mini-mobile {
    max-width: 90px;
    .menu-list {
      li {
        margin-bottom: 30px;

        span:nth-child(2) {
          display: none;
        }
        .icon.is-small {
          scale: 1.4;
        }
      }
      > li {
        a {
          padding-left: 15px;
        }
      }
    }
  }

  td .tags {
    .tag:not(:last-child) {
      margin-right: 0;
    }
  }

  section.dashboard label {
    min-width: auto;
  }

  /* Tabs */
  nav.tabs.is-boxed ul {
    display: block;
    text-align: left;
    flex-grow: 1;

    li {
      a {
        justify-content: left;
        border: 1px solid $grey-lighter !important;
      }

      &.is-active a {
        border-bottom: 1px solid $grey-lighter !important;
        padding-left: 30px;
      }
    }
  }

  /* Table top-left controls */
  .b-table .level-left {
    .actions .a {
      display: block;
      margin: 0 0 5px 0;
    }
  }
}

@media screen and (max-width: 1024px) {
  .navbar-item.user {
    border-top: 1px solid #ddd;
    margin-top: 15px;
  }
  .navbar-item.user .navbar-link {
    padding: 15px;
  }
}

@media screen and (max-width: 850px) {
  .page-header .buttons {
    display: block;
  }

  .b-tabs .tab-content {
    padding: 15px 0 0 0;
  }

  .settings {
    .settings-tabs {
      display: block;

      > .tabs {
        margin-bottom: 20px;
      }

      > .tab-content {
        padding: 0;
      }
    }
  }
}

/* On big sizes, keep the header buttons small and non-expanded. */
@media screen and (min-width: 769px) {
  .page-header .button {
    display: inline-block;
    width: auto;
  }
}
