/* DisKort
 * (c) Er2 2022 <er2@dismail.de>
 * Zlib License
 */

// needed
body { margin: 0; }

#app,
#title,
#side,
.wrapper {
  display: flex;
  overflow: hidden;
}

#app, .wrapper.ext {
  width: 100%;
  height: 100%;
}

#app, .wrapper.vert {
  flex-direction: column;
}

#title {
  min-height: 48px;
  height: 48px;
  padding: 0 16px;

  button {
    width: 32px;
    height: 32px;
    margin-right: 32px;
  }
}

#title, .wrapper.vcenter {
  align-items: center;
}

.wrapper.hcenter {
  justify-content: center;
}

.bord-bot(@r: var(--radius)) {
  border-bottom-left-radius: @r;
  border-bottom-right-radius: @r;
}

.bord-top(@r: var(--radius)) {
  border-top-left-radius: @r;
  border-top-right-radius: @r;
}

.hscroll
{ overflow-x: auto; }
.vscroll
{ overflow-y: auto; }

#side {
  #serv {
    width: 60px;
    height: 100%;
  }

  #serv button, #add {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    margin: 6px; //0 12px 8px 12px;
  }

  #add {
    padding: 2px;
    color: #04cc40;
  }

  #eside {
    width: 240px;
    max-width: 240px;
    transition: width .1s ease-in;

    #chan {
      margin-left: 8px;
      height: 100%;
    }

    #info {
      min-height: 52px;
      height: 52px;
      .bord-bot();

      button
      { margin: 8px; }
      :nth-child(1)
      { margin-right: auto; }
    }
  }
}

#cont {
  flex-grow: 1;
  padding: 8px;
}

div, p, button {
  font-family: sans-serif, Segoe UI;
  scrollbar-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-col);
}

button {
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 20pt;
  border: none;
  border-radius: 50%;

  transition: background-color .1s ease-out, border-radius .1s ease-out;

  width:  32px;
  height: 32px;

  & > .ext {
    width:  100%;
    height: 100%
  }
  & > :not(.ext) {
    width:  50%;
    height: 50%;
  }

  &.close {
    position: absolute;
    align-self: end;
  }
}

@import "theme";