@import '../ui-components/stylesheets/ff-colors.scss';

@import "./layouts.scss";
@import "./transitions.scss";
@import "./animations.scss";
@import "./components/charts.scss";

/* Define Font Family */
/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/Heebo-Regular.ttf') format('ttf');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Define Global Styles */

html, body, #app {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

h1, h2, h3 {
    font-weight: 500;
}

#ff-app {
    flex: 1;
    background-color: $ff-grey-300;
}

.ff-link {
    color: $ff-blue-700;
    &:hover {
        cursor: pointer;
        color: $ff-blue-900;
        text-decoration: underline;
    }
}

.ff-avatar {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
.ff-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.ff-bg-dark {
    background-color: $ff-grey-800;
    .ff-btn.ff-btn--primary {
        background-color: $ff-teal-600;
        &:hover {
            background-color: $ff-teal-700;
        }
    }
}

.ff-loading {
    width: 100%;
    height: 100%;
    h4 {
        font-size: 1.5rem;
        margin-top: 1rem;
        font-weight: 600;
    }
    &.theme-light {
        color: $ff-grey-900;
    }
    &.theme-dark {
        color: white;
    }
}

.ff-icon.ff-clickable {
    cursor: pointer;
    path, circle, rect {
        transition: 0.3s color, 0.3s stroke, 0.3s fill;
        -webkit-transition: 0.3s color, 0.3s stroke, 0.3s fill;
    }
    &:hover {
        color: $ff-blue-600;
    }
}

.ff-icon-xl {
    width: 48px;
    height: 48px;
    stroke-width: 1px;
}

.ff-dialog-box a {
    color: $ff-blue-600;
    &:hover {
        color: $ff-blue-800;
    }
}

.ff-dialog-box--info {
    p {
        margin-bottom: 12px;
    }
    img {
        width: 150px;
        height: 150px;
    }
}

.ff-no-data {
    background-color: $ff-grey-100;
    color: $ff-grey-400;
    font-size: 0.875rem;
    border: $ff-grey-200 solid 1px;
    padding: 12px;
    text-align: center;

    &.ff-no-data-large {
        padding: 64px 12px;
    }

    &--boxed {
        @extend .ff-no-data;

       .message {
           display: block;
           text-align: center;
           margin: 10px 0 10px;
           padding: 10px 0 10px;
           border: 1px solid $ff-grey-300;
       }
    }
}

label {
    cursor: inherit;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: $ff-grey-400 !important;
    opacity: 1; /* Firefox */
}

/* Ensure headlessui MenuItem pointer for active `menuitem` anchors */
[role="menu"] a[role="menuitem"] {
    cursor: pointer
}

.ff-dialog-fixed-height .ff-dialog-content {
    overflow-y: visible;
}

.ff-breadcrumbs {
    display: flex;
    align-items: center;
    label {
        color: $ff-blue-600;
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
    span:last-child label {
        pointer-events: none;
        color: black;
    }
}

// Handle nested buttons in a data table

.ff-data-table--cell a:not(.ff-btn):hover,
.ff-data-table--cell a:hover svg.ff-icon {
    color: $ff-blue-600;
}

.ff-data-table--data .ff-data-table--row--nested .ff-data-table--cell {
    background-color: $ff-grey-50;
    &:first-child {
        padding-left: 36px;
    }
}

.ff-data-table--data .ff-data-table--row--nested.selectable:hover .ff-data-table--cell {
    background-color: $ff-grey-100;
}

.ff-page-banner {
    border-radius: 5px;
    background-color: $ff-blue-100;
    color: $ff-grey-600;
    text-align: left;
    border: 1px solid $ff-blue-300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;

    &.minimal {
        background: none;
        border: none;
        border-radius: 0;
    }
}

.clipped-overflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;

  // number of lines to clip to
  &--two-lines {
    -webkit-line-clamp: 2;
  }
  &--three-lines {
    -webkit-line-clamp: 3;
  }
  &--four-lines {
    -webkit-line-clamp: 4;
  }
}
