*, *:hover, *:active, *:focus{
  outline: none;
}

$dark: #26262A;
$box-radius: 3px;

@import "../node_modules/bulma/bulma";
$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";

body {
  background: lighten($white-bis, 10%);
}

.repo {
  min-height: calc(100vh - 2.6rem);
  margin: 0;

  .sidemenu{
    padding: 0;
  }

  .menu {
    background: $dark;
    color: $white;
    min-height: 100%;

    .menu-label{
      padding: 0.5rem 0 0 1rem;
    }
  }

  .menu-list a {
    color: $white;
    padding: 0.7rem 1.5rem 0.7rem 1.5rem;
    transition: all 100ms;
    border-radius: 0;
    border-left: 0.3rem solid transparent;

    &:hover{
      background: lighten($dark, 2.5%);
    }

    &.is-active {
      background: lighten($dark, 5%);
      border-left: 0.3rem solid $light;
    }

    .icon{
      margin-right: 0.5rem;
    }

    .counter {
      float: right;
      font-weight: bold;
      color: darken($light, 20%);
      font-size: $size-small;
      padding-top: 6px;
    }
  }

  .repo-content{
    max-width: 1100px;
    margin: 0 auto;

    .box {
      padding: 0.5rem;
    }

    .header {
      margin-bottom: 2rem;

      .subtitle{
        font-size: $size-6;
        margin-bottom: 0.75rem;
      }

      .icon{
        float: left;
        height: 4rem;
        font-size: $size-1;
        width: auto;
        margin:0 0.5rem;
      }

      .tag {
        margin: 0 0.2rem;
        border: 1px solid $green;
        background: lighten($green, 50%);
      }
    }

    .stats .level-item{
      .title {
        font-size: $size-4;
      }

      .icon{
        font-size: $size-4;
        margin: 0 0.8rem;
        color: lighten($body-color, 10%);
      }
    }

    .repo-options{
      .clone-button{
        margin-right: 0.5rem;
      }
      .buttons{
        margin: 0 0 0 0.5rem;

        .button {
          margin-bottom: 0;
        }
      }
    }

    .box.has-header {
      padding: 0;

      .box-header {
        background: darken($white, 1%);
        padding: 0.8rem;
        font-size: 0.9rem;
        border-bottom: 1px solid lighten($grey, 40%);
        margin-bottom: 0;

        img {
          margin-right: 0.5rem;
        }
      }

      .content {
        padding: 1rem;
      }
    }

    .repo-files {
      .table {
        .commit {
          color: $grey;
        }

        tr td:last-child {
          color: $grey;
          text-align: right;
        }
      }
    }
  }
}