sutty/app/assets/stylesheets/application.scss

$black: black;
$white: white;
$grey: grey;
$cyan: #13fefe;
$magenta: #f206f9;

$colors: (
  "black": $black,
  "white": $white,
  "cyan": $cyan,
  "magenta": $magenta
);

// Redefinir variables de Bootstrap
$primary: $magenta;
$jumbotron-bg: transparent;
$enable-rounded: false;
$form-feedback-valid-color: $cyan;
$form-feedback-invalid-color: $magenta;
$form-feedback-icon-valid-color: $black;
$component-active-bg: $magenta;

@import "bootstrap";
@import "editor";
@import "helpers";

:root {
  --foreground: #{$black};
  --background: #{$white};
  --color: #{$magenta};
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #{$white};
    --background: #{$black};
    --color: #{$cyan};
  }
}

// TODO: Encontrar la forma de generar esto desde los locales de Rails
$custom-file-text: (
  en: 'Browse',
  es: 'Buscar archivo'
);

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: local('Saira Medium'), local('Saira-Medium'),
    font-url('saira/v3/SairaMedium-subset.woff2') format('woff2'),
    font-url('saira/v3/SairaMedium-subset.zopfli.woff') format('woff');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: local('Saira Bold'), local('Saira-Bold'),
    font-url('saira/v3/SairaBold-subset.woff2') format('woff2'),
    font-url('saira/v3/SairaBold-subset.zopfli.woff') format('woff');
}

body {
  font-family: Saira, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}

* {
  .rtl,
  &[dir=rtl] {
    text-align: right;
  }
}

a {
  color: var(--color);

  &:hover {
    color: var(--color);
  }

  &[target=_blank] {
    /* TODO: Convertir a base64 para no hacer peticiones extra */
    &:after {
      content: image-url('icon_external_link.png');
    }
  }
}

$footer-height: 60px;

/* Colores */
$purpura: #5c004d;
$turquesa: #009389;
$azul: #0b2660;
$fucsia: #e9193e;
$celeste: #91f0ff;
$verde: #96d643;

ol.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item,
.breadcrumb-item.active,
.table,
.form-control,
.custom-file-label {
  color: var(--foreground);
}

.form-control,
.custom-file-label {
  background-color: var(--background);
}

.turbolinks-progress-bar {
  height: 3px;
  background-color: $magenta;
}

.btn-text {
  background-color: transparent;
  border: none;
}

.inline {
  display: inline;
}

.sindu_dragger table {
  background: transparent !important;
}

.d-none, .d-block {
  transition: all 3s;
}

.mapable,
.taggable {
  .input-map,
  .input-tag {
    legend {
      @extend .sr-only
    }

    label {
      margin: 0.5rem;
    }

    input {
      vertical-align: middle;

      &[type=text] {
        @extend .form-control;
        display: inline-block;
        width: calc(100% - 93px);
      }

      &[type=checkbox] {
      }

      &[type=button] {
        @extend .btn;
        @extend .btn-info;
        @extend .m-0;
      }
    }
  }
}

svg {
  .is-path-magenta {
    fill: var(--foreground);
  }
}

.btn {
  background-color: var(--foreground);
  color: var(--background);
  border: none;
  border-radius: 0;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;

  &:hover {
    color: var(--background);
    background-color: var(--color);
  }

  &:active {
    background-color: var(--color);
  }

  &:focus {
    box-shadow: 0 0 0 0.2rem var(--color);
  }
}

.black-bg {
  color: $white;
  background-color: $black;

  svg {
    .is-path-magenta {
      fill: $white
    }
  }

  a {
    color: $magenta;
  }

  .btn {
    background-color: $white;
    color: $black;
    border: none;

    &:hover {
      color: $black;
      background-color: $cyan;
    }

    &:active {
      background-color: $cyan;
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem $cyan;
    }
  }

  .breadcrumb-item {
    color: $white;
  }
}

::-moz-selection,
::selection {
  background: var(--color);
  color: var(--background);
}

.black-bg {
  ::selection,
  ::-moz-selection {
    background-color: $magenta;
    color: $white;
  }
}

.handle {
  img {
    height: 1rem;
  }
}

.custom-control-label {
  font-weight: bold;
}

.designs {
  .design {
    margin-top: 1rem;
  }
}

.editor {
  .ProseMirror-menubar {
    min-height: 32px;
    color: var(--color);
    background-color: var(--background);
    border: none;

    .ProseMirror-menu-active {
      border-radius: unset;
      color: var(--color);
    }
  }

  .ProseMirror {
    @extend .form-control;

    height: auto;
  }
}

.vh-100 {
  height: 100vh !important;
}