panel/app/assets/stylesheets/application.scss

//= require_tree .

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

// Redefinir variables de Bootstrap
$primary: $magenta;

@import "bootstrap";

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

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #{$white};
    --background: #{$black};
    --color: #{$cyan};
  }
  trix-toolbar {
    .trix-button--icon {
      background-color: var(--color);
    }
  }
}

trix-toolbar {
  background-color: var(--background);
  position: sticky;
  top: 0;

}

// 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;
}

.form-control {
  &:focus {
    border-color: transparentize($verde, 0.25);
    box-shadow: 0 0 0 0.2rem transparentize($verde, 0.75);
  }
}

.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;
      }
    }
  }
}

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: black;
    background-color: var(--background);
    border: none;

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

  .ProseMirror {
    @extend .form-control;

    height: auto;
  }
}