@import "../../variables.scss";

.toolbar {
  padding: 0 15px;
  width: 100%;
}

mat-toolbar {
  padding: 0;
}

.mat-toolbar {
  color: white;

  margin: 5px 0 15px 0;

  // padding-right: 3px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  background: transparent;
  border-radius: 5px;

  h1 {
    font-size: 22pt;
  }

  #toolbar_actions{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

    #addTorrentButton, #more-actions-button {
      height: 100%;
      margin: 0 25px;
    }

    #app-search-torrents {
      height: 100%;
      flex-grow: 1;

      margin: 0 10px;

      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
  }
}

.actions {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;

  justify-content: flex-end;

  width: 100%;
}

#logoutButton {
  margin-right: 5px;
}

app-search-torrents {
  margin-left: 20px;
  margin-right: 20px;

  flex-grow: 0.6;
  transition: all ease-in-out 0.4s;

  border-radius: 7px;
}

app-search-torrents:focus-within {
  flex-grow: 0.62;
}

.spacer {
  flex: 1;
}

.homeContainer{
  flex: 1;
  min-height: 100%;
  width: 100%;
}

.content {
  margin: 0 15px 20px 15px;
  background: $bg-surface-light-0;
  border-radius: 7px;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.dark-theme {
  .content {
    background: $bg-surface-dark-0;
    box-shadow: none;
  }

  .mat-toolbar {
    background: inherit;
    box-shadow: none;
  }
}

.homeContainerMobile {
  display: block;

  .content {
    box-shadow: none;
    background: inherit;
  }

  .mat-toolbar { margin-top: 0; background: inherit; }
}
