.chat {
  @include usevar(border-color, 'irc-border-color');

  margin: auto;
  width: 100%;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  padding-right: 8px;
  box-sizing: border-box;

  #tabs {
    overflow-y: scroll;
    box-sizing: border-box;

    .hidden {
      display: none;
    }

    .current {
      @include usevar(box-shadow, 'irc-tab-current-shadow');
    }

    .button {
      padding-left: 10px;
      padding-right: 3px;
      transition: width 0.2s;
      text-transform: none;
      vertical-align: top;

      .close-btn {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s;

        display: inline-block;
        font-size: 9pt;
        vertical-align: middle;
        height: 13px;
        line-height: 11px;
        width: 13px;
        margin-left: 5px;
        padding-left: 2px;
        padding-right: 3px;
        border-radius: 3px;
        border: 1px solid transparent; /* Not themed */

        position: relative;
        top: -2px;
      }

      &:hover .close-btn {
        @include usevar(color, 'irc-tab-close-button-color');
        @include usevar(background-color, 'irc-tab-close-button-background');

        visibility: visible;
        opacity: 1;
      }
    }

    .new-tab {
      padding: 0px;
      padding-left: 10px;
    }
  }

  #history {
    width: 100%;
    min-height: 300px;
    height: 50vh;
    overflow-y: auto;
    padding-top: 3px;
    box-sizing: border-box;

    .channel {
      width: 100%;
      display: none;

      &.current {
        display: table;
      }

      &.hidden {
        display: none;
      }
    }

    .entry {
      display: table-row;
      width: 100%;
      font-size: 11pt;

      &.minor {
        color: #777;
        font-size: 10pt;
      }

      &.alert {
        color: #dd683b;
      }

      &.error {
        color: #880000;
        font-style: italic;
      }

      &.action {
        font-style: italic;

        .msg .action-name {
          font-weight: bold;
        }
      }

      .nick, .msg {
        display: table-cell;
        padding: 0px 4px;
      }

      .nick {
        @include usevar(border-color, 'irc-nick-border-color');

        font-weight: bold;
        text-align: right;
        border-right-width: 1px;
        border-right-style: solid;
      }

      .msg {
        width: 100%;

        .highlight {
          background-color: #dd683b;
          color: #fff;
          padding: 0px 5px;
        }

        .emote {
          height: 1.6em;
          vertical-align: middle;
        }
      }
    }
  }

  #chatbox {
    width: 100%;
  }

  #users {
    @include usevar(color, 'irc-users-color');
    @include usevar(background-color, 'irc-users-background');
    @include usevar(border-color, 'irc-users-border-color');

    position: absolute;
    border-left-width: 1px;
    border-left-style: solid;
    padding: 5px;
    right: 0px;
    top: 0px;
    color: #333;
    height: 100%;
    max-width: 20%;
    width: 20%;
    transition: right 0.2s;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;

    &.collapsed {
      right:-20%;
    }

    .popout {
      @include usevar(background-color, 'irc-users-popout-background');
      @include usevar(border-left-color, 'irc-users-popout-border-color-left');
      @include usevar(border-right-color, 'irc-users-popout-border-color-right');

      width: 8px;
      font-size: 7pt;
      height: 100%;
      border-radius: 2px;
      border: 0px solid transparent; /* Not themed */
      border-left-width: 1px;
      border-left-style: solid;
      border-right-width: 1px;
      border-right-style: solid;
      position: absolute;
      top: 0px;
      left: -8px;
      box-shadow: 0px 0px 0px transparent; /* Not themed */
      text-align: center;
      margin: 0px;
      cursor: pointer;
    }

    .op {
      font-weight: bold;
    }

    .user {
      cursor: pointer;
    }
  }
}