@import './../styles/index.scss';

.no-theme {
  .title-bar {
    background: #00c4ff;
    transition: none;
  }
}

.title-bar {
  transition: background-color 0.5s ease;
  display: flex;
  height: 30px;
  border-radius: 7px 7px 0px 0px;
  padding: 0px 4px;
  -webkit-app-region: drag;

  &.placement-right {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  &.placement-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    > .buttons {
      display: flex;
      flex-direction: row-reverse;
    }
  }

  .buttons {
    display: flex;
    align-items: center;

    .close,
    .minimize {
      cursor: pointer;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      margin: 0px 4px;
      background-color: #cececd;
      -webkit-app-region: no-drag;
    }

    &:hover {
      .close,
      .minimize {
        cursor: pointer;
        background-color: #cececd;
        > i {
          opacity: 1;
        }
      }
    }
  }

  .cptx-version { 
    color: white;
    display: block;
    height: 15px;
    width: 46px;
  }

  .close,
  .minimize {
    > i {
      position: relative;
      top: -1px;
      left: -2px;
      opacity: 0;
      font-size: 1.5em;
    }
  }
}

/* THEME
----------------------------- */

@mixin themable($_THEME, $_BACKGROUND_COLOR){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .title-bar {
      background-color: $_BACKGROUND_COLOR; //#00c4ff
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_DARK);